elementui中同时上传多个文件_2019-12-19 element-ui文件上传 一次请求上传多个文件...
最近在做項目的時候有一個需求，需要導入word文檔，并且需要支持多選。element-ui 的 upload 組件支持多選文件，只需要配置參數(shù) multiple 為 true 即可。但是這個組件默認會將多選的文件分多次進行上傳，于是就會存在多次的上傳請求，由于后臺的接口要求是一次請求能夠上傳多個文件，且我們也知道請求多了會對服務器造成更大的壓力，因而基于多種原因，這個 upload 的上傳行為得進行改造一番。
先來看下改造前后的結(jié)果
改造前的結(jié)果：同時上傳2個文件，會發(fā)出2次對接口的請求，每次請求里包含了一個文件。
upload_result_before
改造后的結(jié)果：同時上傳2個文件，會發(fā)出一次接口請求，接口入?yún)⒗锇?個文件。
upload_result_after
方法一：通過配置file-list(推薦使用)
html部分：
:on-change="fileChange" :on-remove="fileRemove" :auto-upload="false" style="display: inline-block;">
點擊選擇身份證明文件(正反面兩張，多選)
只能上傳圖片格式文件確認上傳
js部分：
//檢測文件變動獲取文件
fileChange(file, fileList) {
this.fileList = fileList;
}
//檢測文件刪除
fileRemove(file, fileList) {
this.fileList = fileList;
}
//手動模擬提交上傳
submitUpload() {
console.log("this.fileList", this.fileList)
// this.$refs.upload.submit();
let formData = new FormData(); // 用FormData存放上傳文件
this.fileList.forEach(file => {
formData.append('file', file.raw)
})
// 調(diào)用上傳接口
editEviCard(formData).then((res) => {
//手動上傳無法觸發(fā)成功或失敗的鉤子函數(shù)，因此這里手動調(diào)用
this.upSuccess(res)
}, (err) => {
this.upError(err)
})
}
upSuccess(res) { //上傳成功
if (res.data.state === 100) {
Message.success({
message: "文件上傳成功！"
})
} else {
Message.error({
message: "文件上傳失敗！"
})
}
}
upError(err) { //上傳失敗
Message.error({
message: "文件上傳失敗！"
})
}
關(guān)鍵代碼說明：
auto-upload 設置為 false 用于關(guān)閉組件的自動上傳；
file-list 配置一個數(shù)組用于接收上傳的文件列表；
multiple 設置為 true 表示支持多選文件；
action 配置為完整的上傳接口url，不配置會報錯
不用配置 data、on-success、on-error等參數(shù)，因為手動上傳不會用到這些配置信息；
最后通過點擊按鈕手動調(diào)用上傳函數(shù) submitUpload ，創(chuàng)建一個 FormData 把 fileList 的文件存進去。
方法二：通過配置http-request
html部分：
class="upload-demo list-uploadbtn"
ref="upload"
:action="curBastUrl"
:auto-upload="false"
:http-request="uploadFile"
:on-remove="updataRemove"
:before-upload="beforeUpload"
:on-change="updatachange"
:multiple="true">
點擊上傳
確 定
js部分：
submitUpload() { // 導入
let tempData = this.filedata
this.filedata = new FormData() // 用FormData存放上傳文件
this.$refs.upload.submit() // 會循環(huán)調(diào)用uploadFile方法，多個文件調(diào)用多次
this.filedata.append('categoryDirectory', tempData.categoryDirectory)
// importCase是上傳接口
importCase(this.filedata).then((res) => {
//手動上傳無法觸發(fā)成功或失敗的鉤子函數(shù)，因此這里手動調(diào)用
this.updataSuccess(res.data)
}, (err) => {
})
}
uploadFile(file) {
this.filedata.append('file', file.file)
}
關(guān)鍵代碼說明：
http-request 自定義上傳方法；
最后通過點擊按鈕手動調(diào)用上傳函數(shù) submitUpload ，創(chuàng)建一個 FormData, 調(diào)用 upload 組件的 submit 方法的時候會循環(huán)調(diào)用 http-request 配置的方法，從而往 FormData 里存放文件。
總結(jié)
以上是生活随笔為你收集整理的elementui中同时上传多个文件_2019-12-19 element-ui文件上传 一次请求上传多个文件...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python read_csv chun
- 下一篇： 视觉平衡与物理平衡_设计中的视觉平衡