vue2上传图片

效果图

file-list动态属性绑定，因为 partnerInfo 配置了多个上传字段（比如 logo、license 等），每个字段对应不同的图片列表。

<el-upload
ref="upload"
action="string"
list-type="picture-card"
accept=".jpg,.jpeg,.png,.bmp,.gif"
:http-request="($event)=>uploadStartImage(item.prop,$event)"
:show-file-list="true"
:file-list="partnerInfo[item.prop]"
:on-preview="($event)=>handlePictureCardPreview(item.prop,$event)"
:on-remove="($event)=>handleRemove(item.prop,$event)"
class="custom-upload-container"
>
<div class="upload-img"><img style="width: 145px; height: 145px;"src="@/assets/trace/upload-img.png"alt=""/>
</div>
</el-upload><el-dialog :visible.sync="dialogVisible" center top="0vh" style="max-height:800px overflow-y: auto; scrollbar-width: none;"><img :src="dialogImageUrl" alt="" style="width: 100%; height:800px" ></el-dialog>

uploadStartImage(pro,param) {let formData = new FormData();formData.append("file", param.file); // 要提交给后台的文件formData.append("scene", "other"); // 上传类型this.loading = true;this.loadingText="上传中"uploadFile(formData).then( res => {if(res && res.url &&res.url.length>0){if(pro=='businessLicense'){//营业执照let newList = [...this.partnerInfo.businessLicense]// 添加返回后的文件信息newList.push({ ...res,attachPath: res.url, attachName: res.name, attachType: res.ext })this.$set(this.partnerInfo,'businessLicense',newList)}else{let newList = [...this.partnerInfo.otherQualifications]//添加返回后的文件信息newList.push({ ...res,attachPath: res.url, attachName: res.name, attachType: res.ext })this.$set(this.partnerInfo,'otherQualifications',newList)}this.$modal.msgSuccess("上传成功")setTimeout(()=>{this.loading = false;},1000)}else{this.$modal.msgError("上传失败")this.loading = false;}}).catch(error => {this.loading = false;})},

    handleRemove(prop,file, fileList){if(prop == 'businessLicense'){const newArr = this.partnerInfo.businessLicense.filter(item => item.uid !== file.uid);this.$set(this.partnerInfo,'businessLicense',newArr)}else{const newArr = this.partnerInfo.otherQualifications.filter(item => item.uid !== file.uid);this.$set(this.partnerInfo,'otherQualifications',newArr)}},handlePictureCardPreview(pro,file) {console.log(file,'file.url');this.dialogImageUrl = file.url;this.dialogVisible = true;}