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

<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>點擊上傳</em> </div> <template #tip> <div class='el-upload__tip'> 最多上傳3個附件 </div> </template> </el-upload> </el-form-item>

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

function handleBeforeUpload (file) {//獲取上傳文件大小let fileSize = Number(file.size / 1024 / 1024);if (fileSize > 100) { ElMessage({ message: '文件大小不能超過100MB，請重新上傳。', type: 'warning'}) return false} } function uploadFile (params) {if (params.file == null) { ElMessage({ message: '請選擇需要上傳的文件', 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個文件，請刪除后重新上傳！', type: 'warning'}) }

然后，假設有個提交按鈕，點擊上傳文件請求接口

/** 提交按鈕 */ function submitForm() {proxy.$refs['taskForms'].validate(valid => { // 表單其他必填字段校驗一下 if (valid) { // 加個loadingloading.value = ElLoading.service({ lock: true, text: 'Loading'})// 判斷是否上傳了文件 沒有就不用調(diào)用上傳if (fileLists.value.length > 0) { console.log('list', fileLists.value) let fileData = new FormData() var isAdd = false // 區(qū)別是否上傳了新文件 var ids = [] // 編輯時存儲已經(jīng)回顯的文件ids // 這里因為編輯和新增邏輯都有，所以在編輯時需要區(qū)分， // 到底是上傳了新文件，還是說依舊是原來的文件，再提交一下表單,提交其他字段而已 // 而判斷是否是最新上傳的文件就依據(jù)是否有文件流raw for(var i =0 ; i< fileLists.value.length; i++) {// 通過是否有文件流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代表上傳操作是哪個模塊的：1任務 2總結 // 若isAdd=true,則說明添加了新文件，調(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)用保存其他字段信息的接口} }}) }

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

// 點擊編輯 function editTasks (row) {let fileData = new FormData()fileData.append('fileId', row.file)// 獲取文件名getFileData(fileData).then((res) => { console.log('test', res) if (res.code == 200) {// 就是這里，拿到文件名，然后文件回顯，我這里是通過接口拿到文件名，// 如果你能更直接的拿到文件名，直接執(zhí)行這個foreach即可res.result.forEach((item) => {// 回顯重點，就是把你需要的東西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 = '編輯任務'showTask.value = truetaskForm.value.file = row.file !== 'null' ? JSON.parse(row.file) : [] }

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

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