vue单个图片上传编辑
2021-12-23 本文已影响0人
秀萝卜
<div class="uploads">
<div class="upload">
<el-upload action="#" :auto-upload="false" list-type="picture-card" accept=".jpg, .jpeg, .png" :file-list="fileList1" :limit="1" :on-change="handleSuccess1" :on-remove="handleRemove1">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</div>
<div class="upload">
<el-upload action="#" :auto-upload="false" list-type="picture-card" accept=".jpg, .jpeg, .png" :file-list="fileList2" :limit="1" :on-change="handleSuccess2" :on-remove="handleRemove2">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</div>
</div>
// 图片使用
fileList1: [],
fileList2: [],
imageUrl1: '',
imageUrl2: '',
imageOk1: '',
imageOk2: '',
handleRemove1(file, fileList) {
this.imageUrl1 = ''
this.imageOk1 = ''
},
handleSuccess1(file, fileList) {
const isLt300K = file.raw.size / 1024 < 300;
if (!isLt300K) {
this.$message.error("上传图片大小不能超过300K!");
this.fileList1 = []
return;
}
this.imageUrl1 = file
},
handleRemove2(file, fileList) {
this.imageUrl2 = ''
this.imageOk2 = ''
},
handleSuccess2(file, fileList) {
const isLt300K = file.raw.size / 1024 < 300;
if (!isLt300K) {
this.$message.error("上传图片大小不能超过300K!");
this.fileList2 = []
return;
}
this.imageUrl2 = file
},
echoImage(item) {
if (item.frontImg) {
this.imageOk1 = item.frontImg
this.fileList1[0] = {
url: item.frontImg
}
}
if (item.backImg) {
this.imageOk2 = item.backImg
this.fileList2[0] = {
url: item.backImg
}
}
},
// 提交时,将图片上传oss
async getImage() {
if (this.imageUrl1) {
this.imageOk1 = await Util.saveOssUrl(this.imageUrl1)
}
if (this.imageUrl2) {
this.imageOk2 = await Util.saveOssUrl(this.imageUrl2)
}
},