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

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

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

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

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

2.上传
Avue的upload数组图片上传以及删除后上传又出现的问题
是不是很神奇,那该怎么去解决呢?那我们继续往下面看
注意看注释!!!
注意看注释!!!
注意看注释!!!

我们公司是这样的,一个单图,一个数组图
Avue的upload数组图片上传以及删除后上传又出现的问题
下面我来说我的逻辑吧

  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官网越来越好吧。
大家看不懂的话多看几遍
注意看注释!!
注意看注释!!
注意看注释!!

我的代码是代码块,复制注意!!!
我是这样完成的,你们注意你们的逻辑就行!
欢迎来评论分享你们的东西,一起学习
看完一间三连!!!!!

上一篇:java-无法从另一个Maven子项目中调用Hibernate / QueryDSL


下一篇:javascript – 如何将(不完整的)选择列表的顺序恢复为原始顺序?