vue 文件拖拽上传功能

现在，很多web端操作都喜欢使用拖拽上传功能。此方法使用起来也很简单，主要是使用 ondrop 和 ondragover 两个事件。

在vue中是这样的

        <div

          class="upload-file-box"

          v-loading="loading"

          @drop="dropFile($event)"

          @dragover="dragOverHandler($event)"

        ></div>

其中，需要注意的是， dragover 事件主要是为了阻止事件默认事件

    dragOverHandler(event) {
      event.preventDefault();
    },

完整代码如下：

        <div
          class="upload-file-box"
          v-loading="loading"
          @drop="dropFile($event)"
          @dragover="dragOverHandler($event)"
        ></div>

    dragOverHandler(event) {
      event.preventDefault();
    },

 　// 文件拖放事件　

    dropFile(ev) { // 此方法中只读取了一个文件，如果需要批量处理，可改下下方函数中的循环逻辑
      ev.preventDefault();
      console.log(ev);
      let file = null;
      if (ev.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
          // If dropped items aren't files, reject them
          if (ev.dataTransfer.items[i].kind === "file") {
            file = ev.dataTransfer.items[i].getAsFile();
            console.log("... file[" + i + "].name = " + file.name);
          }
        }
      } else {
        // Use DataTransfer interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
          console.log(
            "... file[" + i + "].name = " + ev.dataTransfer.files[i].name
          );
          file = ev.dataTransfer.files[i];
        }
      }


      this.uploadFile(file);
    },
　　// 上传文件


    uploadFile(file) {
      // console.log(file)
      if (!file.name.endsWith(".xls") && !file.name.endsWith(".xlsx")) {
        this.$message({
          type: "warning",
          message: "请选择.xls文件或.xlsx文件"
        });
        return;
      }
      this.loading = true;
      let formData = new FormData();
      formData.append("sysId", this.sysId);
      formData.append("file", file);
      batchImportFile(formData)
        .then(res => {
          // this.syncConfigObj.hbr.files.push(res.data);
          document.getElementById("fileInput").value = "";
          this.loading = false;
          this.uploadText = "上传成功";
          this.uploadStatus = "success";
          this.uploadStatusImg = require("@assets/imgs/excelUpSuc.png");
        })
        .catch(() => {
          document.getElementById("fileInput").value = ""
          this.loading = false;
          this.uploadText = "上传失败，请重新上传";
          this.uploadStatus = "fail";
          this.uploadBtnText = "重新上传";
          this.uploadStatusImg = require("@assets/imgs/excelUpFail.png");
        });
    }

axios请求时，需要改下headers请求体类型

headers: { "Content-Type": "mutipart/form-data" }