methods:{
// 缩略图
onBeforeUploadImage (file) {
this.$refs.upload.clearFiles() //清除文件对象
console.log(‘change’, file)
this.coverImg = file.raw
},
before (file) {
console.log(‘文件’, file)
return new Promise((resolve, reject) => {
if (file.type != ‘image/png’) {
this.$alert(‘图片格式必须为.png’, ‘错误’, {
confirmButtonText: ‘确定’
})
resolve(false)
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
resolve(reader.result);
};
}
});
},
async upload (item) {
console.log(item)
let pic = await this.before(this.coverImg);
if (pic == false) {
} else {
this.addForm.thumbnail = pic
}
},
}
2.多张图片上传与返现
<el-form-item label=“商品详情图”
prop=“detImgListCheck”>
<el-upload action=“#”
accept=“image/png”
list-type=“picture-card”
:on-preview=“handlethumbnailPreview”
:http-request=“uploadDetailImg”
:on-remove=“RemoveDetail”
:before-upload=“beforethumbnail”
:on-exceed=“handleDetailExceed”
:limit=“6”
:file-list=“transDetImgList”>