element組件 el-upload自定義上傳

 在網上看了很多element UI 關於el-upload組件的使用，但是覺得還沒有完善，感覺實現不了自己想要的效果,我想實現的是自定義上傳，就是將多文件（單文件）拖拽到上傳組件上，文件未進行上傳，這個時候我還可以對文件進行增刪操作，等我不想操作，然后點擊上傳，才開始上傳，所以用element UI的話，那就需要使用自定義上傳方式。

　　

<el-upload
      class="upload-demo"
      drag
      ref="upload"
      action="#"  
      :http-request="dragSubmit"
      :on-change="handleFileChange"
      :auto-upload="false"
      multiple
      :on-remove="handleRemove"
      :on-preview="getData"
      :file-list="file"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        將文件拖到此處，或
        <em>點擊上傳</em>
      </div>
      <div class="submit-botton-box">
        <el-button v-if="file" type="primary" @click.stop="upload">上傳</el-button>
      </div>
    </el-upload>

methods：

getData(file) {
      console.log("file", file);
      this.tableData = [];
      this.file2Xce(file).then((tabJson, name) => {
        if (tabJson && tabJson.length > 0) {
          tabJson[0].sheet.forEach((item, index) => {
            this.tableData.push(item);
          });
        }
      });
    },

handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.file = [];
      this.file = fileList;
    },

handleFileChange(file) {
      /// 會觸發多次
      this.file.push(file);
      //this.file = file.raw;
      return false;
    },

file2Xce(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = function(e) {
          let data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          let result = [];
          this.wb.SheetNames.forEach(SheetName => {
            result.push({
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[SheetName])
            });
          });
          resolve(result, file.name);
        };
        reader.readAsBinaryString(file.raw, file.name);
      });
    },

dragSubmit(event) {
      let formData = new FormData();
      console.log(this.file);
      formData.append("file", this.file[0].raw);
      this.file.splice(0, 1);
      uploadHttp
        .post("/api/WarrantReserve/ImportWarrantFile", formData)
        .then(res => {
          this.$message.success("上傳成功！");
          this.tableData = [];
        })
        .catch(() => {});
    },

 upload() {
      console.log("上傳");
      this.$refs.upload.submit();
    },