技術標籤：Vue開發javascriptcssvue.jshtmles6

專案場景：

最近專案開發過程中遇見一個前端匯入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" },
};