编辑信息时，因为后端返的图片数组，和Upload的api回调fileList数组不相同，导致在删除图片后，不知道自己删的具体是那一张图以至于删除不了图片 只能新增，后面采用了下面方法解决这个问题
<el-upload
list-type="picture-card"
:action="action"
:file-list="userForm.hyfile"
:before-remove="beforehyRemove"
:before-upload="handlehySuccess"
:on-remove="handlehyRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
//js
data(){
return{
beforehyFileList:[],//删除前的图片数组
}
}
//找出两组数组不同的元素
filterArr(arr1, arr2) {
var uid1=[]
var uid2=[]
for(var i in arr1){
uid1.push( arr1[i].uid)
}
for(var i in arr2){
uid2.push( arr2[i].uid)
}
const arr = [...uid1,...uid2];
const newArr = arr.filter(item => {
return !(uid1.includes(item) && uid2.includes(item));
});
return newArr;
},
handlehySuccess(file) {
let formData = new FormData();
formData.append("file", file);
//上传图片
this.$http({
url: process.env.VUE_APP_BASE_API + "/file/uploadFile",
method: "post",
headers: {
Authorization: "Bearer " + getToken(),
"Content-Type": "multipart/form-data",
},
data: formData,
}).then((res) => {
console.log(res);
if (res.data.code == 200) {
this.$message({
message: "上传成功",
type: "success",
});
//将接口返回的图片信息，添加到修改接口需要上传的参数fileDTOS里面
this.userForm.fileDTOS.push(res.data.data);
}
});
},
//删除前
beforehyRemove(file, fileList){
this.beforehyFileList=JSON.parse(JSON.stringify(fileList))//需要深拷贝，才不会被handlehyRemove影响
console.log(this.beforeFileList)
},
//删除后
handlehyRemove(file, fileList) {
var deleteImg=this.filterArr(this.beforehyFileList,fileList)
// console.log(deleteImg)
for(var i in this.beforehyFileList){
if(this.beforehyFileList[i].uid==deleteImg[0]){
this.userForm.fileDTOS.splice(i, 1);//这是接口要求上传的图片数组参数
}
}
},
