vue3+elementui-plus实现一个接口上传多个文件

首先，先使���element-plus写好上传组件，变量的定义我在这里就省略了都

                                将文件拖拽到此处，或点击上传                                        最多上传3个附件                        

然后，绑定的函数都补充一下

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 {                            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 以上主要通过代码说明，可根据自己实际情况改造

希望我的记录能够帮助到你~