最近项目需要优化图片上传,由单个改成多个,这里记录下自己遇到的一些问题和解决方法

本以为是传全部图片到后台,然后统一处理,但后面在Network中发现upload组件其实还是单一上传,那只能依照它的方式去做了

以下是几个问题的记录

1.上传多图时,success方法每次都只获取到最后一条数据

  这是由于每执行一次文件,就会执行一次success方法,而我们绑定的数据是在属性file-list上的,导致组件上的file-list被更新

  解决方法

    建议定义三个字段

      file_box:用于图片或文件刚开始作展示,由于file-list属性绑定字段有要求,必须是name,url,所以这里定义也可以做数据转化

      file_data:用于图片的添加删除操作,数据之间的变更

      file:用于提交到服务器的数据,看需要什么数据,对form_data做处理,可能会有人说直接提交form_data不就可以了,前提是你无需做数据处理和可以一次性提交成功,否则页面上的图片可能会变动

          

    初始化赋值,这里是以上定义的两个属性

    this.form[name].file_box = this.setFile(name);
    this.form[name].file_data = this.setFile(name);

    

    添加操作  

    success(e, file, name) {
        let tmp_file = this.form[name].file_data;
        if (e.code == 1) {
          tmp_file.push({
            name: file.name,
            url: e.data.src,
          });
        } else {
          this.$message({
            message: e.msg,
            type: 'warning'
          });
          this.remove(file, name);
        }
      },

    这里success是简单封装之后的方法,这样file_data添加就不会出现遗漏的情况

2.如果上传的内容并不全是图片,还有其他内容,那这里我们要对内容做限制,并进一步优化

  上传前判断方法before

    before(file) {
        if (!/.(png|jpg|jpeg|doc|docx|xls|xlsx|pdf)$/.test(file.name)) {
          this.$message.error('上传文件格式png, jpg, jpeg,doc, docx, xls, xlsx, pdf!');
          return false;
        }
      },

  在执行删除操作后,再去添加图片就会发现数据有点问题,经过多次测试发现,upload组件在before方法执行阻止后会执行remove方法,随即我的数据就莫名少了一条,这才是我一直没发现的问题

    remove(file, name) {
        let files = this.form[name].file_data;
        if (files) {
          let index = files.findIndex(item => item.url == file.url || (file.response&&(item.url == file.response.data.src))); //这里主要是删除图片
          if (index > -1) {
            files.splice(index, 1);
          }
        }
      },

  然后就对删除操作做了一些限制,file.response是后台返回的已上传文件路径,用来判断删除图片的。