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是后台返回的已上傳文件路徑，用來判斷刪除圖片的。