el-upload前端實現(xiàn)多文件上傳功能示例
更新時間:2024年07月22日 08:31:48 作者:Sample_淺淺未央
在Vue.js中可以使用Element UI庫中的<el-upload>組件來實現(xiàn)多文件上傳的功能,這篇文章主要給大家介紹了關于el-upload前端實現(xiàn)多文件上傳功能的相關資料,需要的朋友可以參考下
template中:
<el-upload
class="upload-demo"
ref="fileUpload1"
:file-list="fileList1"
action=""
:on-exceed="handleExceed1"
:http-request="httpRequest1"
:on-remove="handleRemove1"
>
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>script中:
data:
formdata1: new FormData(), //創(chuàng)建FormData1對象
methods:
methods: {
handleExceed1(file, fileList) {
//上傳的過程中觸發(fā)的函數(shù)
},
httpRequest1(file) {
//上傳完畢觸發(fā)的函數(shù)
this.formdata1.append("new_files", file.file);
},
handleRemove1(file, fileList) {
/**
* 檢測刪除的file是否是新加入的file文件 如果不是,刪除就給與md5的值
*/
if ((file.raw != undefined && file.raw instanceof File) == false) {
this.deleteFiles1 += file.md5 + ",";
}
},
},提交的時候:
this.formdata1 = new FormData(); //創(chuàng)建FormData對象
this.formdata1.append("fault_no", this.$route.query.fault_no);
this.formdata1.append("progress", "1");
this.formdata1.append("step", n);
this.formdata1.append("files_to_delete", this.deleteFiles1);//刪除的文件的id值
this.$refs.fileUpload1.submit();//用來提交文件上傳的file格式文件組
updateFaultFile(this.formdata1).then((res) => {
if (res.resCode === 20000) {
this.$message.success("更新成功");
} else {
this.$message.error("更新失敗");
}
});如果僅僅是單文件上傳的話:直接在提交的時候傳入
this.formdata1.append("new_files", this.fileList[0]);就可以了
總結
到此這篇關于el-upload前端實現(xiàn)多文件上傳功能的文章就介紹到這了,更多相關el-upload前端多文件上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中get方法\post方法如何傳遞數(shù)組參數(shù)詳解
在前后端交互的時候,有時候需要通過get或者delete傳遞一個數(shù)組給后臺,下面下面這篇文章主要給大家介紹了關于vue中get方法\post方法如何傳遞數(shù)組參數(shù),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03

