目錄概述屬性設置處理邏輯概述

具體需求場景如下：

選擇excel文件后，需要把導入的excel文件手動上傳到后臺服務器，并將導入成功后的統計結果顯示出來。官網也有手動上傳的示例，通過 action='url' 傳入地址的方式，但在實際項目中請求需要自己配置，下面具體說明實現的方法。

說明：

在上傳文件到展示統計結果，我們后端給了兩個接口：首先調用文件上傳接口，上傳成功后，根據后端返回的mark再調用統計結果接口。

屬性設置

.vue文件

<el-row> <div class='el-form-item__content'><el-upload ref='upload' accept='.xls,.xlsx' action='#' :auto-upload='false' :multiple='false' :file-list='fileList' :before-upload='beforeUpload' :http-request='uploadHttpRequest' :on-remove='fileRemove' :on-change='fileChange'> <el-button size='small' type='primary'>選擇文件</el-button> <div slot='tip' class='el-upload__tip'>一次只能上傳一個xls/xlsx文件，且不超過10M</div></el-upload> </div></el-row><el-row> <el-button size='small' @click='closeDialog'>取 消</el-button> <el-button type='primary' size='small' @click='submitUpload'>上 傳</el-button> <el-button type='primary' size='small' @click='downloadRes'>下載反饋結果</el-button></el-row>

其中：

action：上傳的地址，可以不用過多關注，但也不建議刪除，可用普通字符串代替 auto-upload：是否自動上傳，因這里是手動上傳，所以設置為false multiple：是否支持多選，此處設置為 false file-list：上傳的文件列表數組 before-upload：上傳文件之前的鉤子，參數為上傳的文件，可以在這里判斷上傳文件的類型，文件大小等 http-request：自定義上傳的方法，會覆蓋默認的上傳行為（即action='url'） on-remove：上傳文件移除時觸發的方法 on-change：上傳文件狀態（添加，上傳成功或失敗）改變時觸發的方法處理邏輯

邏輯處理代碼如下：

methods: { // 上傳文件之前的鉤子：判斷上傳文件格式、大小等，若返回false則停止上傳 beforeUpload(file) {//文件類型const isType = file.type === ’application/vnd.ms-excel’const isTypeComputer = file.type === ’application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’const fileType = isType || isTypeComputerif(!fileType) { this.$message.error(’上傳文件只能是xls/xlsx格式！’)}// 文件大小限制為10Mconst fileLimit = file.size / 1024 / 1024 < 10;if(!fileLimit) { this.$message.error(’上傳文件大小不超過10M！’);}return fileType && fileLimit }, // 自定義上傳方法，param是默認參數，可以取得file文件信息，具體信息如下圖 uploadHttpRequest(param) {const formData = new FormData() //FormData對象，添加參數只能通過append(’key’, value)的形式添加formData.append(’file’, param.file) //添加文件對象formData.append(’uploadType’, this.rulesType)const url = `${this.myBaseURL}/operation/ruleImport/importData` //上傳地址axios.post(url, formData) .then( res => {const { data: { code, mark } } = resif(code === 0) { param.onSuccess() // 上傳成功的文件顯示綠色的對勾 this.uploadMark = mark}return this.countData(this.uploadMark) //根據響應的 mark 值調用統計結果接口，返回一個promise以便進行鏈式調用 }) .then( res => { //鏈式調用，統計結果的響應const { data: { code, data } } = resif(code === 0) { console.log(’統計結果’, data)} }) .catch( err => {console.log(’失敗’, err)param.onError() //上傳失敗的文件會從文件列表中刪除 }) }, // 統計結果 countFile(mark) {return new Promise((resolve, reject) => { axios.get(`/operation/ruleImport/countData?mark=${mark}`).then(res => { resolve(res)}).catch(error => { reject(error)})}) }, // 點擊上傳：手動上傳到服務器，此時會觸發組件的http-request submitUpload() {this.$refs.upload.submit() }, // 文件發生改變 fileChange(file, fileList) {if (fileList.length > 0) { this.fileList = [fileList[fileList.length - 1]] // 展示最后一次選擇的文件} }, // 移除選擇的文件 fileRemove(file, fileList) {if(fileList.length < 1) { this.uploadDisabled = true //未選擇文件則禁用上傳按鈕} }, // 取消 closeDialog() {this.$refs.upload.clearFiles() //清除上傳文件對象this.fileList = [] //清空選擇的文件列表this.$emit(’close’, false) }}

http-request 的param參數，打印結果如圖。通過param.file取得當前文件對象。

以上就是詳解Vue ElementUI手動上傳excel文件到服務器的詳細內容，更多關于Vue ElementUI手動上傳excel文件到服務器的資料請關注好吧啦網其它相關文章！