Avue的upload数组图片上传以及删除后上传又出现的问题

近期使用Avue开发上传图片碰到了一个问题，官方也有这个问题，在此记录一下这个问题。

Avue官网的avue-crud的type=upload有一个array类型的，出现是下面图的样子

注意坑：按理说我们点击删除一个图片就剩下一个，然后上传一个又变成两个了，结果不是你们想的那样，删除一个，上传一个，结果是三个，删除的没有真正的删除，你们可以去Avue官网去看看这个坑
看坑链接

1.删除

2.上传

是不是很神奇，那该怎么去解决呢？那我们继续往下面看
注意看注释！！！
注意看注释！！！
注意看注释！！！
我们公司是这样的，一个单图，一个数组图

下面我来说我的逻辑吧

1. 首先avue-crud自定义一个编辑按钮，点击后把当前一行的数据传到函数里
2. 数据到函数里，把值赋值到自定义的弹出框里面的avue-form里面v-mode里面，然后打开弹出框
3. 给表格一个删除事件:upload-delete=“uploadDelete”，file.uid是你点击的下标，记住里面写一个Promise，这样单个图删除不会报错，里面可以写自己的删除逻辑（删除是最重要的，就因为删除不成功才会这样的）
4. 之后提交就ok了

下面放代码

-----------------------html，自定义编辑按钮
    <avue-crud
      :data="data"
      :option="option"
      :page.sync="page"
      :table-loading="loading"
      @on-load="queryList"
      @search-change="searchChange"
      @search-reset="refresh"
      @refresh-change="refresh"
    >
      <template slot-scope="{ row }" slot="menu">
        <el-button
          style="color: #409EFF;"
          size="small"
          type="text"
          @click="editBox(row)"       //点击打开自定义弹出框，顺便把这行数组传过去
          icon="el-icon-edit"
          >编辑</el-button
        >
      </template>
    </avue-crud>
-------------------------html，自定义的弹出框
<!-- 站点信息编辑 -->
    <el-dialog
      title="站点信息编辑"
      :visible.sync="box"   //控制弹出框打开和关闭
      v-dialogdrag
      class="avue-dialog"
      width="60%"
      :append-to-body="true"
    >
      <avue-form            //avue的表格
        :option="optionDit"
        v-model="formDit"
        :upload-delete="uploadDelete"   //删除前的回调
        @submit="handleSubmit"			//表格提交
      >
      </avue-form>
    </el-dialog>
 --------------------------------------js
 optionDit: {
        column: [
          {
            label: "站点名称",
            prop: "shopName",
            rules: [
              { required: true, message: "请填写站点名称", trigger: "change" },
            ],
          },
          {
            label: "详细地址",
            prop: "address",
            rules: [
              { required: true, message: "请填写详细地址", trigger: "change" },
            ],
          },
          {
            label: "营业执照",
            prop: "businessLicense",
            type: "upload",
            listType: "picture-img",        //这是单图
            span: 24,
            props: {
              value: "url",					//看文档有解释
              label: "url",					//看文档有解释
            },
            propsHttp: {
              url: "url",					//看文档有解释
              home: this.$api.imgUrl,		//看文档有解释
            },
            tip: "只能上传jpg/png,大小700*400,且不超过500kb",
            data: { imgType: "---------" },	//看文档有解释
            dataType: "json",				
            action: "----------------",
            viewDisplay: false,
          },
          {
            hide: true,
            showColumn: false,
            label: "站点照片",
            prop: "shopPhotos",
            type: "upload",
            dataType: "array",				//数组图
            limit: 5,
            props: {
              value: "url",					//看文档有解释
              label: "url",					//看文档有解释
            },	
            propsHttp: {
              url: "url",					//看文档有解释
              home: this.$api.imgUrl,		//看文档有解释
            },
            data: { imgType: "---------" },
            span: 24,
            listType: "picture-card",		//数组图
            tip: "只能上传jpg/png文件，且不超过500kb",
            action: "-------------------",
            rules: [
              { required: true, message: "请上传站点照片", trigger: "change" },
            ],
          },
        ],
      },
      formDit: {
        id: "",								//映射props的数据，也是填写和选择存放的地方
        shopName: "",						//映射props的数据，也是填写和选择存放的地方
        address: "",						//映射props的数据，也是填写和选择存放的地方
        businessLicense: "",				//映射props的数据，也是填写和选择存放的地方
        shopPhotos: "",						//映射props的数据，也是填写和选择存放的地方
      },
    };
    --------------------------函数
        // 打开编辑
    editBox(row) {                 //打开编辑前，把数据放进去
      console.log(row);
      this.formDit.id = row.id;
      this.formDit.shopName = row.shopName;
      this.formDit.address = row.address;
      this.formDit.businessLicense =
        row.businessLicense == "/img/bg/yyzz.png" ? "" : row.businessLicenseList;
      this.formDit.shopPhotos = row.shopPhotos;
      this.box = true;
    },
        // 删除图片
    uploadDelete(column, file) { 
    //file.uid是代表你点击的下标
    //删除图片是最重要的！，里面必须写Promise，不然上面有一个单图点击删除会报错
    //下面Promise里面可以写组件的逻辑，我标志出来了
      return new Promise((resolve, reject) => {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
          ------------------------------写自己的逻辑
            console.log(file.uid);
            if (file.uid) {
              this.formDit.shopPhotos.splice(file.uid, 1);
            }
           ----------------------------------------------
            // 重点来了   这里操作完以后  一定一定要resolve出去，因为这样avue会将原来的数据给清除  如果不resolve，那么再添加图片的话  他会把得到的路径与之前的拼接成一个字符串用“，”分割
            resolve();
          })
          .catch(() => {
            // 这里也一定一定要reject，虽然不搞 看似好像没问题  保险起见还是给写上，毕竟我不想再爬坑了 哈哈哈
            reject();
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
       // 提交编辑
    handleSubmit(form, done) {
      if (this.formDit.shopPhotos.length < 5) {
        this.$message.warning("站点图片必须5张！");
        done();
      } else {
        this.$api
          .editUpdate({
            id: this.formDit.id,
            shopName: this.formDit.shopName,
            address: this.formDit.address,
            businessLicense: this.formDit.businessLicense,
            shopPhotos: this.formDit.shopPhotos.toString(),
          })
          .then((res) => {
            console.log(res);
            if (res.code === 0) {
              this.$message.success("修改成功！");
              this.reload();
            }
          });
      }
    },

看到这个就已经结束了，其实没什么难的，但是呢官网也是这个问题，又不跟我们说怎么弄，哎，希望以后Avue官网越来越好吧。
大家看不懂的话多看几遍
注意看注释！！
注意看注释！！
注意看注释！！
我的代码是代码块，复制注意！！！
我是这样完成的，你们注意你们的逻辑就行！
欢迎来评论分享你们的东西，一起学习
看完一间三连！！！！！