el-upload組件多個(gè)文件上傳都是多次請(qǐng)求上傳接口,沒有在文檔中找到能夠通過(guò)一次請(qǐng)求把所有文件上傳的設(shè)置。最后只能通過(guò)用組件的部分功能,拋棄組件上傳功能,通過(guò)axios自己將所有文件一次上傳。
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="10"
accept=".txt"
name="files"
:multiple="true" //可多選
:action="upload.url" //必填隨便填
:headers="upload.headers"
:disabled="upload.isUploading"
:on-change="handleFileChange"
:before-remove="handleFileRemove"
:auto-upload="false"
:file-list="upload.fileList"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
將文件拖到此處,或
<em>點(diǎn)擊上傳</em>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:僅允許導(dǎo)入“txt”格式文件!</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">確 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
data() {
return {
upload: {
// 是否顯示彈出層(用戶導(dǎo)入)
open: false,
// 彈出層標(biāo)題(用戶導(dǎo)入)
title: '',
// 是否禁用上傳
isUploading: false,
// 是否更新已經(jīng)存在的用戶數(shù)據(jù)
updateSupport: 0,
// 設(shè)置上傳的請(qǐng)求頭部
headers: { Authorization: getToken() },
// 上傳的地址
url: baseURL + 'codefileupload/upload',
fileList: [],
fileName: []
}
};
},
methods:{
// 上傳發(fā)生變化鉤子
handleFileChange(file, fileList) {
this.upload.fileList = fileList;
},
// 刪除之前鉤子
handleFileRemove(file, fileList) {
this.upload.fileList = fileList;
},
// 提交上傳文件
submitFileForm() {
<!-- 創(chuàng)建新的數(shù)據(jù)對(duì)象 -->
let formData = new FormData();
<!-- 將上傳的文件放到數(shù)據(jù)對(duì)象中 -->
this.upload.fileList.forEach(file => {
formData.append('files', file.raw);
this.upload.fileName.push(file.name);
});
<!-- 文件名 -->
formData.append('fileName', this.upload.fileName);
<!-- 自定義上傳 -->
axios
.post(this.upload.url, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: getToken() } })
.then(response => {
if(response.code == 200){
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.msgSuccess('上傳成功!');
}else{
this.$message.error(response.msg);
}
})
.catch(error => {
this.$message.error('上傳失??!');
});
}
}