首先，先使用element-plus寫(xiě)好上傳組件，變量的定義我在這里就省略了都

<el-form-item prop='file' label='附件'> <el-upload drag ref='upload-demo' action='' v-model='taskForm.file' :file-list='fileLists' :before-upload='handleBeforeUpload' :http-request='uploadFile' :on-remove='handleRemove' :on-change='handleFileChange' :limit='3' :on-exceed='handleExceed' :headers='headers' multiple > <el-icon class='el-icon--upload'><upload-filled /></el-icon> <div class='el-upload__text'> 將文件拖拽到此處，或<em>點(diǎn)擊上傳</em> </div> <template #tip> <div class='el-upload__tip'> 最多上傳3個(gè)附件 </div> </template> </el-upload> </el-form-item>

然后，綁定的函數(shù)都補(bǔ)充一下

function handleBeforeUpload (file) {//獲取上傳文件大小let fileSize = Number(file.size / 1024 / 1024);if (fileSize > 100) { ElMessage({ message: '文件大小不能超過(guò)100MB，請(qǐng)重新上傳。', type: 'warning'}) return false} } function uploadFile (params) {if (params.file == null) { ElMessage({ message: '請(qǐng)選擇需要上傳的文件', type: 'warning'}) return false} } function handleFileChange (file, fileList) {fileLists.value = fileList } function handleRemove (file, fileList) {fileLists.value = fileList } function handleExceed(files, fileList) {ElMessage({ message: '最多上傳3個(gè)文件，請(qǐng)刪除后重新上傳！', type: 'warning'}) }

然后，假設(shè)有個(gè)提交按鈕，點(diǎn)擊上傳文件請(qǐng)求接口

/** 提交按鈕 */ function submitForm() {proxy.$refs['taskForms'].validate(valid => { // 表單其他必填字段校驗(yàn)一下 if (valid) { // 加個(gè)loadingloading.value = ElLoading.service({ lock: true, text: 'Loading'})// 判斷是否上傳了文件 沒(méi)有就不用調(diào)用上傳if (fileLists.value.length > 0) { console.log('list', fileLists.value) let fileData = new FormData() var isAdd = false // 區(qū)別是否上傳了新文件 var ids = [] // 編輯時(shí)存儲(chǔ)已經(jīng)回顯的文件ids // 這里因?yàn)榫庉嫼托略鲞壿嫸加校栽诰庉嫊r(shí)需要區(qū)分， // 到底是上傳了新文件，還是說(shuō)依舊是原來(lái)的文件，再提交一下表單,提交其他字段而已 // 而判斷是否是最新上傳的文件就依據(jù)是否有文件流raw for(var i =0 ; i< fileLists.value.length; i++) {// 通過(guò)是否有文件流raw判斷是否上傳新文件，是則appendif (fileLists.value[i].raw) { isAdd = true fileData.append('file', fileLists.value[i].raw)} else { // 拿到回顯文件(即非新上傳文件)的id ids.push(fileLists.value[i].id)} } console.log('ids=', ids) fileData.append('type', 1) // type代表上傳操作是哪個(gè)模塊的：1任務(wù) 2總結(jié) // 若isAdd=true,則說(shuō)明添加了新文件，調(diào)用上傳 if (isAdd) {uploadFileData(fileData).then((res) => { console.log('upload', res) if (res.code == 200) {// 回顯文件id數(shù)組和新上傳文件得到的id數(shù)組合并taskForm.value.file = ids.concat(res.result.ids)console.log('file-ids',taskForm.value.file)addAndEdit() // 調(diào)用保存其他字段信息的接口 }}) } else {taskForm.value.file = idsaddAndEdit() // 調(diào)用保存其他字段信息的接口 }} else { taskForm.value.file = '' addAndEdit() // 調(diào)用保存其他字段信息的接口} }}) }

既然有編輯，那就應(yīng)該做回顯的邏輯，文件如何回顯到上傳組件上

// 點(diǎn)擊編輯 function editTasks (row) {let fileData = new FormData()fileData.append('fileId', row.file)// 獲取文件名getFileData(fileData).then((res) => { console.log('test', res) if (res.code == 200) {// 就是這里，拿到文件名，然后文件回顯，我這里是通過(guò)接口拿到文件名，// 如果你能更直接的拿到文件名，直接執(zhí)行這個(gè)foreach即可res.result.forEach((item) => {// 回顯重點(diǎn)，就是把你需要的東西push到fileList中 fileLists.value.push({ name: item.fileName, id: item.id })})console.log('edoite', taskForm.value, fileLists.value) }})taskId.value = row.idtaskForm.value = {...row}taskTitle.value = '編輯任務(wù)'showTask.value = truetaskForm.value.file = row.file !== 'null' ? JSON.parse(row.file) : [] }

over 以上主要通過(guò)代碼說(shuō)明，可根據(jù)自己實(shí)際情況改造

到此這篇關(guān)于vue3+elementui-plus實(shí)現(xiàn)一個(gè)接口上傳多個(gè)文件的文章就介紹到這了,更多相關(guān)vue3 elementui-plus上傳多個(gè)文件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！