vue之el-upload使用FormData多文件同時上傳問題
更新時間：2023年05月22日 15:00:30 作者：maidu_xbd
這篇文章主要介紹了vue之el-upload使用FormData多文件同時上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
需求描述
使用el-upload 手動上傳方式進行文件上傳【https://element.eleme.cn/#/zh-CN/component/upload】，當選擇上傳多個文件時，選擇幾個文件就會向后臺發(fā)送幾次請求。
先后臺要求同時一次請求發(fā)送多個文件，包括文件（如圖中的file）和其他參數(shù)（如圖中的graphName和userID）
解決方法
通過FormData對象存放上傳的文件和參數(shù)，將fileList中的文件存放在FormData中。具體見（3）多文件通過FormData存放上傳
（1）補充知識點：FormData
FormData 數(shù)據(jù)形式為鍵值對，數(shù)據(jù)可通過XMLHttpRequest.send（）方式發(fā)送出去
FormData.append（key,value）：向FormData對象中添加一個鍵值對，如執(zhí)行FormData.append（key1,value1）后FormData.append（key1,value2），key1對應(yīng)值value1不會被覆蓋，而是新增對應(yīng)值value2FormData.get(key)：返回FormData對象中給定key對應(yīng)的第一個值FormData.getAll(key)：返回FormData對象中給定key對應(yīng)的所有值
FormData 具體使用見https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
（2）單文件手動上傳
:auto-upload="false"----關(guān)閉自動上傳:limit="1"----限制上傳文件數(shù)量為1個:data="uploadData"----上傳文件時的附帶參數(shù)如userID:action="batchImportUrl"----請求接口路徑
具體見代碼：
<el-dialog
:visible.sync="batchImportDialogVisible"
class="uploadFormDialog"
width="40%"
@close="closebatchImportForm"
>
<div slot="title">
<span>{{ dialogTitle }}</span>
</div>
<el-upload
class="upload-demo"
ref="batchImport"
:auto-upload="false"
:on-error="batchImportError"
:on-remove="batchRemoveFile"
:before-upload="beforebatchImport"
:on-progress="batchImportProgress"
:on-success="batchImportSuccess"
:on-change="batchImportChange"
:file-list="fileList"
:limit="1"
:data="uploadData"
:action="batchImportUrl"
>
<el-button
slot="trigger"
size="small"
type="warning"
@click="selectFile"
>選取文件</el-button
>
<el-button size="small" type="success" @click="submitBatchImport">
<span v-show="!isUploadFlag">上傳到服務(wù)器</span>
<span v-show="isUploadFlag">
正在上傳中
<i class="el-icon-loading"></i>
</span>
</el-button>
<div slot="tip" class="el-upload__tip">
上傳文件格式為json或rdf,點擊
<a class="download" @click="downloadTemplate">下載模板</a
> 可查看模板。
</div>
</el-upload>
</el-dialog> // 批量導(dǎo)入新的圖譜信息
batchAddGraph() {
this.dialogTitle = "批量創(chuàng)建新圖譜";
this.batchImportDialogVisible = true;
this.batchImportUrl = " /api/manage/common/graph/add/batch";
},
// 批量導(dǎo)入已存在的圖譜信息
batchUpdateGraph(name) {
this.dialogTitle = `批量導(dǎo)入${name}圖譜`;
this.uploadData = {
userID: "",
graphName: this.graphName
};
this.batchImportDialogVisible = true;
this.batchImportUrl = " /api/manage/common/graph/update/increment";
},
// 提交批量導(dǎo)入
submitBatchImport() {
if (this.$refs.batchImport.uploadFiles.length == 0) {
this.$message.warning("請選擇要上傳的文件");
return;
}
this.loading = this.$loading({
lock: true,
text: "正在導(dǎo)入圖譜,請稍等",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.6)"
});
this.isUploadFlag = true;
this.$refs.batchImport.submit();
},
// 選擇文件
selectFile() {
this.$refs.batchImport.clearFiles();
},
// 關(guān)閉對話框-清除照片
closebatchImportForm() {
this.isUploadFlag = false;
this.$refs.batchImport.clearFiles();
},
// 批量上傳成功的鉤子
batchImportSuccess(res, file, fileList) {
if (res.respCode === "200") {
this.$message.success("批量導(dǎo)入成功");
this.graphDialogVisible = false;
this.isUploadFlag = false;
this.getGraphInfo();
} else {
this.$message.error(res.respDesc);
}
this.batchImportDialogVisible = false;
this.loading.close();
},
// 批量導(dǎo)入失敗時的鉤子
batchImportError() {
this.$message.error(" 批量導(dǎo)入失敗");
this.isUploadFlag = false;
this.loading.close();
},
// 批量導(dǎo)入-文件狀態(tài)改變時的鉤子
batchImportChange(file, fileList) {
// console.log("文件狀態(tài)改變時的鉤子");
if (!/.(json|rdf)$/.test(file.name)) {
this.$refs.batchImport.uploadFiles = [];
this.$message.warning("請選擇json或rdf格式的文件");
}
},
// 上傳文件前的鉤子
beforebatchImport(file) {
// console.log("上傳文件前的鉤子");
},
// 文件上傳時的鉤子
batchImportProgress(event, file, fileList) {
// console.log("==文件上傳時progress==", file);
},
//文件列表移除文件時的鉤子
batchRemoveFile() {
// console.log("移除");
}（3）多文件通過FormData存放上傳
:file-list="fileList" 配置一個數(shù)組用于接收上傳的文件列表
multiple 選擇文件時允許多選
具體代碼：
<el-dialog
:visible.sync="batchImportDialogVisible"
class="uploadFormDialog"
width="40%"
@close="closebatchImportForm"
:close-on-click-modal="false"
>
<div slot="title">
<span>{{ dialogTitle }}</span>
</div>
<div v-if="dialogTitle == '批量創(chuàng)建新圖譜'" class="input-wrapper">
<div class="name">圖譜名稱</div>
<el-input v-model="bacthImportGraphName" clearable></el-input>
</div>
<el-upload
class="upload-demo"
ref="batchImport"
:auto-upload="false"
accept=".json,.csv,.rdf"
:on-remove="batchRemoveFile"
:on-change="batchImportChange"
:on-exceed="batchImportExceed"
:file-list="fileList"
:limit="2"
:action="batchImportUrl"
multiple
>
<el-button
slot="trigger"
size="small"
type="warning"
@click="selectFile"
>選取文件</el-button
>
<el-button size="small" type="success" @click="submitBatchImport">
<span v-show="!isUploadFlag">上傳到服務(wù)器</span>
<span v-show="isUploadFlag">
正在上傳中
<i class="el-icon-loading"></i>
</span>
</el-button>
<div slot="tip" class="el-upload__tip">
上傳文件格式為json、rdf或csv,點擊
<a class="download" @click="downloadTemplate">下載模板</a
> 可查看模板。
</div>
</el-upload>
</el-dialog>// 選擇文件
selectFile() {
// this.$refs.batchImport.clearFiles();
},
// 批量導(dǎo)入新的圖譜信息
batchAddGraph() {
this.dialogTitle = "批量創(chuàng)建新圖譜";
this.batchImportDialogVisible = true;
this.uploadData.graphName = this.bacthImportGraphName; //綁定數(shù)據(jù)
this.batchImportUrl = " /api/manage/common/graph/add/batch";
},
// 批量導(dǎo)入已存在的圖譜信息
batchUpdateGraph(name) {
this.dialogTitle = `批量導(dǎo)入${name}圖譜`;
this.uploadData = {
userID: "",
graphName: this.graphName
};
this.batchImportDialogVisible = true;
this.batchImportUrl = " /api/manage/common/graph/update/increment";
},
// 批量導(dǎo)入-文件狀態(tài)改變時的鉤子
batchImportChange(file, fileList) {
// console.log("文件狀態(tài)改變時的鉤子");
this.fileList = fileList;
},
//文件列表移除文件時的鉤子
batchRemoveFile(file, fileList) {
// console.log("文件列表移除文件時的鉤子");
this.fileList = fileList;
},
// 提交批量導(dǎo)入
submitBatchImport() {
if (this.dialogTitle == "批量創(chuàng)建新圖譜") {
this.uploadData.graphName = this.bacthImportGraphName;
// 1.提交批量創(chuàng)建新圖譜
if (!this.bacthImportGraphName) {
this.$message.warning("請?zhí)顚憟D譜名稱");
return;
}
}
if (this.$refs.batchImport.uploadFiles.length == 0) {
this.$message.warning("請選擇要上傳的文件");
return;
}
this.loading = this.$loading({
lock: true,
text: "正在導(dǎo)入圖譜,請稍等",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.6)"
});
this.isUploadFlag = true;
// this.$refs.batchImport.submit();
let formData = new FormData(); // 用FormData存放上傳文件
this.fileList.forEach(file => {
formData.append("file", file.raw); //文件
});
formData.append("graphName", this.uploadData.graphName);
formData.append("userID", "13013");
axios
.post(this.batchImportUrl, formData, {
headers: { "Content-Type": "multipart/form-data" } //設(shè)置請求頭請求格式為JSON
})
.then(res => {
this.$message.success(res.data.respDesc);
this.graphDialogVisible = false;
this.isUploadFlag = false;
this.bacthImportGraphName = "";
this.getGraphInfo();
this.loading.close();
this.batchImportDialogVisible = false;
})
.catch(err => {
console.log(err);
});
},
// 關(guān)閉對話框-清除照片
closebatchImportForm() {
this.isUploadFlag = false;
this.$refs.batchImport.clearFiles();
},
// 批量導(dǎo)入-定義超出限制時的行為
batchImportExceed(files, fileList) {
this.$message.warning(
`當前限制選擇 2 個文件，本次選擇了 ${
files.length
} 個文件，共選擇了 ${files.length + fileList.length} 個文件`
);
},總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 多選框所選數(shù)量動態(tài)變換Box的高度
在Web開發(fā)中,使用Vue.js框架可以通過ref屬性、v-model指令和計算屬性等特性實現(xiàn)元素高度的動態(tài)調(diào)整,文章詳細介紹了如何利用Vue的功能根據(jù)多選框的選擇數(shù)量動態(tài)改變元素的高度,并通過多個示例展示其應(yīng)用2024-09-09
本文主要介紹了vue3.x頁面功能拆分方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了使用table做成樹形結(jié)構(gòu)的table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細介紹了vue中非父子組件通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決
最近開發(fā)中遇到了些問題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決辦法,需要的朋友可以參考下2023-01-01
Vue中Class和Style實現(xiàn)v-bind綁定的幾種用法
項目開發(fā)中給元素添加/刪除 class 是非常常見的行為之一， 例如網(wǎng)站導(dǎo)航都會給選中項添加一個 active 類用來區(qū)別選與未選中的樣式，那么在 vue 中 我們?nèi)绾翁幚磉@類的效果呢？下面我們就一起來了解一下2021-05-05
在日常開發(fā)中,經(jīng)常遇到需要支持列表循環(huán)滾動展示,特別是在數(shù)據(jù)化大屏開發(fā)中,所以小編今天為大家介紹一下如何利用vue3實現(xiàn)一個無縫滾動組件吧2023-09-09
Vuex中如何getters動態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動態(tài)獲取state的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
關(guān)于Vue在ie10下空白頁的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁的debug相關(guān)資料，這是最近在工作中遇到的一個問題，通過查找相關(guān)的資料終于解決了，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-05-05
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03