文章目錄

• • 業(yè)務(wù)需求：
  • 實(shí)現(xiàn)方式：
  • • • 具體步驟：
      • • • 1、引入組件：
          • 2、data中定義：
          • 3、methods中方法：

業(yè)務(wù)需求：

批量導(dǎo)入Excel文件

實(shí)現(xiàn)方式：

使用組件upload

具體步驟：

1、引入組件：

<el-uploadaccept=".xlsx, .xls" //文件類型:file-list="fileList" //存儲文件的數(shù)組:action="actionUrl" //請求的url:before-upload="beforeUploadFile" //文件上傳之前的鉤子:on-exceed="exceedFile" //文件超出個數(shù)時的鉤子:on-success="uploadSuccess" //文件上傳成功時的鉤子:show-file-list="isShowFile" //是否顯示文件上傳列表multiple //支持多文件上傳:limit="limitNum" //文件上傳個數(shù)限制><el-button type="primary" style="margin-left:0px">導(dǎo)入Excel</el-button></el-upload>

2、data中定義：

fileList: [], //excel 文件列表limitNum: 3, //選擇文件個數(shù)actionUrl: "/api/teach/importCourse", //上傳文件urlisShowFile: false //文件列表是否顯示 默認(rèn)不顯示

3、methods中方法：

//文件上傳之前的鉤子beforeUploadFile(file) {console.log("before upload");console.log(file.size);var FileExt = file.name.replace(/.+\./, "");if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {this.$message({type: "warning",message: "請上傳后綴名為xls、xlsx的附件！"});return false;}//file.size 以字節(jié)為單位this.isLt2k = file.size / 2048 < 100 ? "1" : "0";if (this.isLt2k === "0") {this.$message({message: "上傳文件大小不能超過100k!",type: "error"});}return this.isLt2k === "1" ? true : false;},//文件超出個數(shù)時的鉤子exceedFile(files, fileList) {console.log("文件超出個數(shù)：", files);this.$message.warning(`只能選擇 ${this.limitNum} 個文件，當(dāng)前共選擇了 ${files.length +fileList.length} 個`);},

//文件上傳成功時的鉤子uploadSuccess(response, file, fileList) {console.log("上傳文件", response.data);console.log("返回狀態(tài)", response.code);console.log(fileList);if (response.code != "0000") {this.excelData = response.data;this.exportErrorFile();return this.$message.error("導(dǎo)入失敗！");} else {this.isShowFile = true;return this.$message.success("導(dǎo)入成功！");}},

總結(jié)

以上是生活随笔為你收集整理的vue+Element ui中使用 upload实现Excel文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。