Vue项目使用FormData导入文件解析以及实例

项目场景：

最近项目开发过程中遇见一个前端导入excel的需求，之前做的都是导出，突然来了一个导入，一时还把我唬住了，不过这点需求是难不倒聪明的我，今天不忙就给大家分享出来，希望大家受用。。

---

问题描述：前端导入excel

解决方案：

1.使用input输入框选择本地文件
     <input
        @change="addFile"
        name="file"
        ref="file"
        multiple="multiple"
        prefix-icon="el-icon-upload2"
        type="file"
        class="uploadClass"
    />
    <button @click="uploadTitle()">上传文件</button>
2.在data中创建一个formDate对象
    data(){
        return{
            formData:new FormData()
        }
    }
3.将获取的文件添加到formData中
    addFile(event) {
      // 通过DOM取文件数据
      let inputDOM = this.$refs.file;
      this.fil = inputDOM.files;
      this.formData.append("file", this.fil[0]);
    },
4.将文件传给后台（调用后端接口）
    uploadTitle() { 
      if (!this.fil) {
        this.$message.warning("请选择文件");
      } else {
          return new Promise((resolve) => {
                let config = {
                    //添加请求头
                    headers: { "Content-Type": "multipart/form-data" },
                };
                axios.post('后端接口', this.formData, config).then(res => {
                    if (res) {
                        resolve(res)
                    }
                })
            })
        }
    }

提示：
调用后端接口的时候一定要记得设置http的请求头，否则你是不可能导入成功的

let config = {
   headers: { "Content-Type": "multipart/form-data" },
};