vue element 删除不了刚上传的照片墙。

问题描述：在照片墙进行添加照片abc,接着删除照片c,再上传照片d。最后显示的是照片abcd。
如下动图图所示：

当点击编辑进行修改时：目前有照片abcd,再上传照片ef,接着删除照片abcde,最后照片墙显示ef两张照片。

解决思路： 删除刚上传的图片和删除进入编辑页面就已经上传的照片地址是不一样的。

通过debug发现如下

//当删除进入编辑页面就已上传的照片返回的file为：
{uid: 1577496098902, status: "success", __ob__: Observer}
name: "foodImage1"
status: "success"
uid: 1577496098902
url: "http://***.***.***.***:****/images/seller/15773434907795997db74e65585b9c46e14c8df8f64a.png"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get url: ƒ reactiveGetter()
set url: ƒ reactiveSetter(newVal)
__proto__: Object
//打印刚上传就删除的照片时，返回来的file为：
{…}
  name: "4.jpg"
  percentage: 100
  raw: File
  response:
    code: 0
    data: Array(1)
      0: {fileName: "15774966176754.jpg", fileSize: "3454", contentType: "image/jpeg"}
      length: 1
      __proto__: Array(0)
    msg: "OK"
    __proto__: Object
  size: 3454
  status: "success"
  uid: 1577496704060
  url: "blob:http://127.0.0.1:8080/e065c664-c0e0-4034-abfa-27d5f46f6f77"

因此在删除时前应该进行判断何种情况。

实现方法：代码如下所示：

<el-form-item prop="carouselPicture" label="轮播图" style="text-align:left;">
     <el-upload
         v-if="ruleForm.fileList.length<4"
         action="/api/upload"
         list-type="picture-card"
         :file-list="ruleForm.fileList"
         :headers="myheaders"
         :limit="3"
         :before-upload="beforeAvatarUpload"
         :on-exceed="handleExceed"
         :on-success="carousePictureOnSuccess"
         :on-preview="handlePictureCardPreview"
         :on-remove="carousePictureOnRemove"
      >
          <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
</el-form-item>
 //轮播图删除
      carousePictureOnRemove(file, fileList) {
        console.log("轮播图删除");
        console.log(file);
        console.log("=============");        
        console.log(fileList);
        debugger
        var str2 = this.carouselPicture;
        console.log(str2,1);
        var strimg = '';
        if(file.raw == null){
            strimg = file.url.replace(this.baseImageUrl,'');//删除已存在
            console.log(strimg,2);
        }else{
            strimg = file.response.data[0].fileName;//删除刚上传
            
        console.log(strimg,2.2);
        }
        str2 = str2.replace(strimg+",",'');
        console.log(str2,3);
        this.carouselPicture = str2;//文件名
        console.log(this.carouselPicture,4);
        this.ruleForm.carouselPicture = this.carouselPicture;//图集
        console.log(this.ruleForm.carouselPicture,5);
      },