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();
    },