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\”
: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) : [] }