fix: 🐛 修复上传文件多选文件时,上传失败的问题

修复上传文件多选文件时,上传失败的问题
This commit is contained in:
Theo
2025-03-19 18:07:23 +08:00
parent 6204deb7cb
commit 98e73fef40
2 changed files with 29 additions and 5 deletions

View File

@@ -46,6 +46,7 @@ import {
UploadRawFile, UploadRawFile,
UploadUserFile, UploadUserFile,
UploadFile, UploadFile,
UploadFiles,
UploadProgressEvent, UploadProgressEvent,
UploadRequestOptions, UploadRequestOptions,
} from "element-plus"; } from "element-plus";
@@ -147,7 +148,7 @@ watch(
function handleBeforeUpload(file: UploadRawFile) { function handleBeforeUpload(file: UploadRawFile) {
// 限制文件大小 // 限制文件大小
if (file.size > props.maxFileSize * 1024 * 1024) { if (file.size > props.maxFileSize * 1024 * 1024) {
ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M"); ElMessage.warning("上传文件不能大于" + props.maxFileSize + "M");
return false; return false;
} }
return true; return true;
@@ -190,10 +191,34 @@ const handleProgress = (event: UploadProgressEvent) => {
/** /**
* 上传成功 * 上传成功
*/ */
const handleSuccess = (fileInfo: FileInfo) => { const handleSuccess = (response: any, uploadFile: UploadFile, files: UploadFiles) => {
ElMessage.success("上传成功"); ElMessage.success("上传成功");
//只有当状态为success或者fail代表文件上传全部完成了失败也算完成
modelValue.value = [...modelValue.value, { name: fileInfo.name, url: fileInfo.url } as FileInfo]; if (
files.every((file: UploadFile) => {
return file.status === "success" || file.status === "fail";
})
) {
let fileInfos = [] as FileInfo[];
files.map((file: UploadFile) => {
if (file.status === "success") {
//只取携带response的才是刚上传的
let res = file.response as FileInfo;
if (res) {
fileInfos.push({ name: res.name, url: res.url } as FileInfo);
}
} else {
//失败上传 从fileList删掉不展示
fileList.value.splice(
fileList.value.findIndex((e) => e.uid === file.uid),
1
);
}
});
if (fileInfos.length > 0) {
modelValue.value = [...modelValue.value, ...fileInfos];
}
}
}; };
/** /**

View File

@@ -10,7 +10,6 @@
:http-request="handleUpload" :http-request="handleUpload"
:on-success="onSuccess" :on-success="onSuccess"
:on-error="onError" :on-error="onError"
multiple
> >
<template #default> <template #default>
<el-image v-if="modelValue" :src="modelValue" /> <el-image v-if="modelValue" :src="modelValue" />