vue element多图上传

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

本以为是传全部图片到后台，然后统一处理，但后面在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是后台返回的已上传文件路径，用来判断删除图片的。

vue element多图上传

猜你喜欢