处理多个图片
<el-form-item label="浮窗广告">
<div class="pic-upload mini-upload" style="margin-top:0px">
<el-upload action="/...." accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG" ref="uploadFileFloat" style="width: 80px; height: 80px;" list-type="picture-card" name="upfile" :data="{type:'image'}" :before-upload="beforeUpload" :file-list="editform.floatFile" :on-success="uploadFile.bind(null, {'name':'xcx_adv_float'})">
<i slot="default" class="el-icon-plus" ref="uploadFloat"></i>
<div slot="file">
<img class="el-upload-list__item-thumbnail" :src="xcx_adv_float.pic_url" alt />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePreview(xcx_adv_float.pic_url)">
<i class="el-icon-zoom-in scale-icon"></i>
</span>
<span class="el-upload-list__item-delete" @click="removeFile({'name':'xcx_adv_float','ref':'uploadFileFloat'})">
<i class="el-icon-delete scale-icon"></i>
</span>
<div class="upload-list__item-change" @click="replaceFile({'name':'xcx_adv_float','ref':'uploadFloat'})">点击替换</div>
</span>
</div>
</el-upload>
</div>
<div class="more-tip">Tip:100×100px</div>
</el-form-item>
//多个上传前
beforeUpload(file) {
const isSize = file.size / 1024 / 1024 < 2;
if (!isSize) {
this.$message.error('上传图片大小不能超过2MB');
}
return isSize;
},
//多个成功上传文件
uploadFile(data, res, file) {
this.editform[data.name].pic = res.path;
this.editform[data.name].pic_url = res.url;
},
//展示图片
handlePreview(url) {
this.dialogImageUrl = '';
this.dialogImageUrl = url;
this.dialogVisible = true;
},
//多个删除图片
removeFile(data) {
this.editform[data.name].pic = '';
this.editform[data.name].pic_url = '';
this.$refs[data.ref].clearFiles();
},
//多个替换图片,触发input
replaceFile(data) {
this.$refs[data.ref].click();
},