11 changed files with 408 additions and 42 deletions
@ -0,0 +1,207 @@ |
|||
<template> |
|||
<div class="upload-wrapper"> |
|||
<!-- 预览图片 --> |
|||
<div class="image-list" v-if="previewList.length>0"> |
|||
<div class="image-box" |
|||
v-for="(item, index) in previewList" :key="index"> |
|||
<img :src="item.url" class="image-preview" /> |
|||
<!-- <i class="el-icon-close delete-icon" @click.stop="removeImage(index)" />--> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 上传按钮 --> |
|||
<el-upload |
|||
class="image-uploader" |
|||
action="" |
|||
:http-request="uploadHandler" |
|||
:show-file-list="false" |
|||
:before-upload="beforeUpload" |
|||
:accept="acceptMime" |
|||
> |
|||
<GuipButton class="upload-button" type="ignore" :btnstyle="btnStyle"> |
|||
<div class="bgImg"></div> |
|||
<span>选择图片</span> |
|||
</GuipButton> |
|||
</el-upload> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import GuipButton from "@/components/GuipButton.vue"; |
|||
|
|||
export default { |
|||
name: "ImgUpload", |
|||
components: {GuipButton}, |
|||
props: { |
|||
value: { |
|||
type: [Array, File, null], |
|||
default: () => [] |
|||
}, |
|||
defaultUrls: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
acceptTypes: { |
|||
type: Array, |
|||
default: () => ['jpg', 'png'] |
|||
}, |
|||
sizeLimit: { |
|||
type: Number, |
|||
default: 2 // MB |
|||
}, |
|||
btnStyle:{ |
|||
type: Object, |
|||
default() { |
|||
return { |
|||
width: '118px', |
|||
color: '#23242B', |
|||
border: '1px solid #BABDC2', |
|||
background: '#F2F3F5', |
|||
'border-radius': '4px' |
|||
}; |
|||
} |
|||
}, |
|||
maxCount: { |
|||
type: Number, |
|||
default: 1 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
previewList: [], |
|||
initialized: false |
|||
}; |
|||
}, |
|||
watch: { |
|||
defaultUrls(newUrls) { |
|||
if (!this.initialized && Array.isArray(newUrls) && newUrls.length) { |
|||
this.previewList = newUrls |
|||
.filter(url => !!url) |
|||
.map(url => ({ url })); |
|||
this.initialized = true; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// 根据后缀数组生成 MIME 类型字符串，用于 <el-upload accept=""> |
|||
acceptMime() { |
|||
const map = { |
|||
jpg: 'image/jpeg', |
|||
jpeg: 'image/jpeg', |
|||
png: 'image/png', |
|||
webp: 'image/webp', |
|||
gif: 'image/gif' |
|||
}; |
|||
return this.acceptTypes |
|||
.map(ext => map[ext.toLowerCase()]) |
|||
.filter(Boolean) |
|||
.join(','); |
|||
} |
|||
}, |
|||
methods: { |
|||
beforeUpload(file) { |
|||
if(this.maxCount === 1){ |
|||
this.previewList = [] |
|||
} |
|||
|
|||
if (this.previewList.length >= this.maxCount) { |
|||
this.$message.warning(`最多只能上传 ${this.maxCount} 张图片`); |
|||
return false; |
|||
} |
|||
|
|||
const isImage = file.type.startsWith("image/"); |
|||
const isLt2M = file.size / 1024 / 1024 < 2; |
|||
if (!isImage) { |
|||
this.$message.error("只能上传图片格式！"); |
|||
return false; |
|||
} |
|||
if (!isLt2M) { |
|||
this.$message.error("图片大小不能超过 2MB！"); |
|||
return false; |
|||
} |
|||
|
|||
const allowedTypes = this.acceptMime.split(','); |
|||
if (!allowedTypes.includes(file.type)) { |
|||
this.$message.error(`只允许上传 ${this.acceptTypes.join('/').toUpperCase()} 格式图片！`); |
|||
return false; |
|||
} |
|||
|
|||
const url = URL.createObjectURL(file); |
|||
|
|||
if(this.maxCount === 1){ |
|||
this.previewList = [{ file, url }]; |
|||
this.$emit('input', { file, url }); |
|||
} else { |
|||
this.previewList.push({ file, url }); |
|||
|
|||
const files = this.previewList |
|||
.filter(item => item.file) |
|||
.map(item => item.file); |
|||
this.$emit('input', files); |
|||
} |
|||
|
|||
return false; |
|||
}, |
|||
uploadHandler() { |
|||
// 留空，使用自定义上传逻辑，由父组件决定是否提交 file 到服务器 |
|||
}, |
|||
removeImage(index) { |
|||
this.previewList.splice(index, 1); |
|||
const files = this.previewList |
|||
.filter(item => item.file) |
|||
.map(item => item.file); |
|||
this.$emit('input', files); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.upload-wrapper { |
|||
} |
|||
|
|||
.image-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 8px; |
|||
margin-bottom: 10px; |
|||
} |
|||
.image-box { |
|||
position: relative; |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
.image-preview { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
border: 1px solid #ccc; |
|||
border-radius: 4px; |
|||
} |
|||
.delete-icon { |
|||
position: absolute; |
|||
top: -6px; |
|||
right: -6px; |
|||
font-size: 16px; |
|||
color: white; |
|||
background: #f56c6c; |
|||
border-radius: 50%; |
|||
padding: 2px; |
|||
cursor: pointer; |
|||
} |
|||
.bgImg{ |
|||
width: 20px; |
|||
height: 16px; |
|||
margin-right: 6px; |
|||
background-image: url(@/assets/site/uploadIcon.svg); |
|||
} |
|||
.upload-button:hover{ |
|||
border: 1px solid #006AFF!important; |
|||
} |
|||
.upload-button:hover .bgImg { |
|||
background-image: url(@/assets/site/uploadIcon_light.svg); |
|||
} |
|||
.upload-button:hover span { |
|||
color: #006AFF; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue