VUE拖拽上传文件，以及点击上传，其他框架可做参考

<template>

  <div>

    <div style="width: 100%;">

      <div class="upload-demo" id="drop_area">

        <i class="el-icon-upload mg-r-5"></i>

        <div class="el-upload__text">

          将文件拖到此处，或<span @click="getFile" class="linkButn"

            >点击上传</span

          >

          <input

            style="display:none"

            type="file"

            class="input-upload  cur-hand"

            @change="importResident"

            id="infile"

          />

        </div>

      </div>

      <div class="downLoadFile">

        <a href="./static/导入居民模板.xlsx" download="导入居民模板.xlsx">

          <span class="miaoshu">只能上传excel文件，且不超过2MB</span

          ><span @click="download" class="linkButn">下载导入模板</span>

        </a>

      </div>

      <div class="fileHtml">

        <div>{{ fileData.name }}</div>

         <div v-if="hasFile" class="hasFile">*未上传任何文件</div>

      </div>

    </div>

  </div>

</template>

<script>

import SparkMD5 from "spark-md5";

import { uploadExcel } from "../../../utils/request";

export default {

  data() {

    return {

      hasFile:false,

      imgArr: [],

      fileData: "",

      action: "",

      postAddress: "",

      rules: {

        name: [{ required: true, message: "请输入分组名称", trigger: "change" }]

      }

    };

  },

  mounted() {

    // this.$refs["ruleForm"].resetFields();

    let _this = this;

    var dropbox = document.getElementById("drop_area");

    dropbox.addEventListener("drop", this.enentDrop, false);

    dropbox.addEventListener("dragleave", function(e) {

      e.stopPropagation();

      e.preventDefault();

    });

    dropbox.addEventListener("dragenter", function(e) {

      e.stopPropagation();

      e.preventDefault();

    });

    dropbox.addEventListener("dragover", function(e) {

      e.stopPropagation();

      e.preventDefault();

    });

  },

  methods: {

    getData() {

      $("#infile").val("");

      this.fileData = "";

    },

    getFile() {

      this.hasFile = false;

      console.log("111");

      $("#infile").click();

    },

    // 导入居民模板

    importResident(e) {

      this.hasFile = false;

      var that = this;

      const file = e.target.files.length === 0 ? null : e.target.files[0];

      that.fileData = file;

    },

    enentDrop: function(e) {

      this.hasFile = false;

      e.stopPropagation();

      e.preventDefault(); //必填字段

      this.fileData =

        e.dataTransfer.files.length === 0 ? null : e.dataTransfer.files[0];

    },

    uploadFile() {

      console.log("保存文件");

      var that = this;

      var fileReader = new FileReader();

      var blobSlice =

          File.prototype.mozSlice ||

          File.prototype.webkitSlice ||

          File.prototype.slice,

        spark = new SparkMD5();

      fileReader.readAsBinaryString(this.fileData);

      var md5String = "";

      fileReader.onload = function(e) {

        spark.appendBinary(e.target.result); // append binary string

        md5String = spark.end();

        that.md5String = md5String;

        // uploadExcel("", file, md5String).then(data => {

        //   $("#infile").val("");

        //   msg("导入成功", "success");

        // });

      };

    },

    // 下载导入模板成功提示

    download() {

      console.log("下载成功");

      //    setTimeout(function () {

      //     msg("下载成功", "success");

      //   }, 600);

    },

    // 保存数据

    saveData() {

      console.log(this.fileData.name);

      if(this.fileData.name){

       

      } else {

          this.hasFile = true;

        console.log('未上传任何文件')

      }

      // this.$refs["ruleForm"].validate(valid => {

      // if (valid) {

      //   this.uploadFile();

      //   this.$emit("closeProp");

      // }

      // });

    }

  }

};

</script>

<style scoped>

a {

  text-decoration: none;

  color: #333;

}

a span {

  color: #7572f7;

}

.upload-demo {

  width: 80%;

  margin: auto;

  height: 15rem;

  border: 1px solid #7572f7;

  text-align: center;

}

.el-icon-upload {

  font-size: 6rem;

  margin: 2rem;

}

.linkButn {

  cursor: pointer;

  color: #7572f7 !important;

}

.miaoshu {

  color: #333;

}

.downLoadFile {

  margin: auto;

  text-align: center;

  margin-top: 1rem;

}

.fileHtml {

  height: 1.5rem;

  line-height: 1.5rem;

}

.hasFile{

  color: red;

}

</style>

uploadExcel方法 需要改进判断类型

export function uploadExcel(url, file, md5String, type) {

    const token = sessionStorage.getItem("token");

    return new Promise((resolve, reject) => {

        const formFile = new FormData();

        const md5File = {

            md5: md5String,

            type: type

        }

        formFile.append('file', file);

        if (md5String) {

            formFile.append('data', DES3.encrypt(JSON.stringify(md5File)));

        }

        const instance = axios.create({

            withCredentials: true,

            timeout: 1000000

        })

        instance.post(api + url, formFile, {

            headers: {

                'token': token,

                'Content-Type': 'multipart/form-data'

            },

            //     responseType: 'text' // 表明返回服务器返回的数据类型

        }).then(res => { //上传成功后导出文件

            const data = JSON.parse(DES3.decrypt(res.data));

            if (Object.is(data.errcode, 200)) {

                if (data.data.filePath) {

                    const link1 = document.createElement('a');

                    link1.download = data.data.fileName;

                    link1.href = data.data.filePath;

                    link1.style.display = "none";

                    link1.click();

                }

                resolve(data)

            } else if (Object.is(data.errcode, 401)) {

                window.location.href = './#/login.do'

            } else {

                msg(data.errmsg);

                reject(data.errmsg)

            }

        }).catch(err => {

            msg('文件上传失败，请检查文件的格式是否正确');

        })

    });

安装spark-md5