一.前言項目中使用到比較多的關于Excel的前端上傳與下載，整理出來，以便后續使用或分析他人。

1.前端vue:模板下載與導入Excel

導入Excel封裝了子組件，點擊導入按鈕可調用子組件，打開文件上傳的對話框，上傳成功后返回結果

<el-col style="padding: 10px 0 20px;">    <el-button     class="pull-right"     icon="el-icon-upload"     type="primary"     size="mini"     @click="importFile()"    >批量導入</el-button>    <el-button     class="pull-right right-10"     icon="el-icon-download"     type="primary"     size="mini"     @click="downloadFile('檔案模板')"    >模板下載</el-button>    <el-button     size="mini"     type="primary"     icon="el-icon-plus"     class="pull-right"     @click="addRow"    >新增</el-button>    <div class="pull-right">     <el-input      placeholder="請輸入編碼,名稱"      prefix-icon="el-icon-search"      v-model="FinQueryParams.archiveFilter"      size="mini"     ></el-input>    </div>   </el-col>　　 <!-- 批量導入Dialog開始 -->  <uploadTemp   :apiURL="fileUploadUrl"   ref="refFileUpload"   :Refresh="Refresh"   :OtherParams="{brandId: QueryParams.BrandID}"  ></uploadTemp>  <!-- 批量導入Dialog結束 -->importFile() {  this.$refs.refFileUpload.open(); }　

向后臺提交文件的方法

submitFile() {   const _this = this;   if (!_this.files.name) {    _this.$message.warning("請選擇要上傳的文件！");    return false;   }   let fileFormData = new FormData();   //filename是鍵，file是值，就是要傳的文件   fileFormData.append("file", _this.files, _this.files.name);   if(_this.OtherParams){    const keys=Object.keys(_this.OtherParams);    keys.forEach(e=>{     fileFormData.append(e, _this.OtherParams[e]);    })   }   let requestConfig = {    headers: {     "Content-Type": "multipart/form-data"    }   };   AjaxHelper.post(_this.apiURL, fileFormData, requestConfig)    .then(res => {     console.log(res);     if (res.success) {      const result = res.result;      if (result.errorCount == 0 && result.successCount > 0) {       _this.$message({        message: `導入成功,成功${result.successCount}條`,        type: "success"       });       _this.closeFileUpload();       _this.Refresh();      } else if (result.errorCount > 0 && result.successCount >= 0) {       _this.Refresh();       _this.tableData = result.uploadErrors;       _this.successCount = result.successCount;       _this.innerVisible = true;      } else if (result.errorCount == 0 && result.successCount == 0) {       _this.$message({        message: `上傳文件中數據為空`,        type: "error"       });      }     }    })    .catch(function(error) {     console.log(error);    });  },

這是上傳文件的調用方法。