解决 el-upload fileList 数据不同步，手动 p

el-upload - fileList
闪动

使用的是 el-upload 照片墙模式 功能要 上传 删除
直接上传还好，但是编辑进来就会自带图片，
el-upload 的 fileList 又不同步 详情 不同步说明
刚开始解决办法是手动 push 数据 但是会造成闪动问题。
最终解决方法如下：

<el-upload
  action="http://xxxx"
  list-type="picture-card"
  :file-list="fileArray"
  :limit="4"
  :on-exceed="handleExceed"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handleAvatarSuccess"
>
  <img src="../../assets/img/house/add.png" alt>
  <p>Add photos</p>
</el-upload>

data() {
  return {
    fileArray: [],
    house_pic: []
}

在 created 获取后端传值，深拷贝一分数据 到 el-upload 绑定的数据里。

created() {
  this.house_pic = [
    {
      name: "Hydrangeas.jpg",
      url:
        "http://xxx.xxx.com/xxx.jpg"
    }
  ];

  this.fileArray = [...this.house_pic];

  console.log(this.house_pic, "赋值", this.fileArray);
}

handleAvatarSuccess(response, file, fileList) {
  // 上传图片
  if (response.code == 0) {
    this.house_pic.push({
      url: response.data.img
    });
  }
  console.log(file, fileList, "上传", this.house_pic);
},
handleRemove(file, fileList) {
  console.log(file, "删除", file.url);

  let url = file.url;
  let detection = true; 
  // 等于 true 说明是刚刚上传的
  // 判断方法有很多 随便用一种。
  detection = url.indexOf("blob") != -1;

  console.log("检测", detection);

  if (detection) {
    this.house_pic.forEach((item, i, arr) => {
      if (item.url === file.response.data.img) {
        this.house_pic.splice(i, 1);
        console.log(this.house_pic, "response");
      }
    });
  } else {
    this.house_pic.forEach((item, i, arr) => {
      if (item.url === file.url) {
        this.house_pic.splice(i, 1);
        console.log(this.house_pic, "file.url");
      }
    });
  }
}