vue3+elementui-plus實現一個接口上傳多個文件功能

首先，先使用element-plus寫好上傳組件，變量的定義我在這里就省略了都 el-form-item prop="file" label="附件" el-upload style="width:100%" class="upload-demo" drag ref="upload-demo" action="" v-model="taskForm.file"

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

<el-form-item prop="file" label="附件">
     <el-upload
         style="width:100%"
         class="upload-demo"
         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>

然后，綁定的函數都補充一下

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) {
            // 加個loading
                loading.value = ElLoading.service({
                    lock: true,
                    text: 'Loading'
                })
                // 判斷是否上傳了文件 沒有就不用調用上傳
                if (fileLists.value.length > 0) {
                    console.log('list', fileLists.value)
                    let fileData = new FormData()
                    var isAdd = false // 區別是否上傳了新文件
                    var ids = [] // 編輯時存儲已經回顯的文件ids
                    // 這里因為編輯和新增邏輯都有，所以在編輯時需要區分，
                    // 到底是上傳了新文件，還是說依舊是原來的文件，再提交一下表單,提交其他字段而已
                    // 而判斷是否是最新上傳的文件就依據是否有文件流raw
                    for(var i =0 ; i< fileLists.value.length; i++) {
                        // 通過是否有文件流raw判斷是否上傳新文件，是則append
                        if (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,則說明添加了新文件，調用上傳
                    if (isAdd) {
                        uploadFileData(fileData).then((res) => {
                            console.log('upload', res)
                            if (res.code == 200) {
                                // 回顯文件id數組和新上傳文件得到的id數組合并
                                taskForm.value.file = ids.concat(res.result.ids)
                                console.log('file-ids',taskForm.value.file)
                                addAndEdit() // 調用保存其他字段信息的接口
                            }
                        })
                    } else {
                        taskForm.value.file = ids
                        addAndEdit() // 調用保存其他字段信息的接口
                    }
                } else {
                    taskForm.value.file = ''
                    addAndEdit() // 調用保存其他字段信息的接口
                }
            }
        })
    }

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

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

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

到此這篇關于vue3+elementui-plus實現一個接口上傳多個文件的文章就介紹到這了,更多相關vue3?elementui-plus上傳多個文件內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！