el-upload前端實(shí)現(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">點(diǎn)擊上傳</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 + ","; } }, },
提交的時(shí)候:
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("更新失敗"); } });
如果僅僅是單文件上傳的話:直接在提交的時(shí)候傳入
this.formdata1.append("new_files", this.fileList[0]);
就可以了
總結(jié)
到此這篇關(guān)于el-upload前端實(shí)現(xiàn)多文件上傳功能的文章就介紹到這了,更多相關(guān)el-upload前端多文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vite項(xiàng)目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項(xiàng)目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue中g(shù)et方法\post方法如何傳遞數(shù)組參數(shù)詳解
在前后端交互的時(shí)候,有時(shí)候需要通過get或者delete傳遞一個(gè)數(shù)組給后臺,下面下面這篇文章主要給大家介紹了關(guān)于vue中g(shù)et方法\post方法如何傳遞數(shù)組參數(shù),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法
這篇文章主要介紹了vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記
這篇文章主要介紹了Vue3+Vite+ElementPlus構(gòu)建的相關(guān)資料,文中還介紹如何在Vue3項(xiàng)目中加入ElementPlus庫,并提供了完整引入的示例,需要的朋友可以參考下2024-12-12