diff --git a/src/components/Upload/MultiUpload.vue b/src/components/Upload/MultiUpload.vue index 1194509e..0da012af 100644 --- a/src/components/Upload/MultiUpload.vue +++ b/src/components/Upload/MultiUpload.vue @@ -28,11 +28,11 @@ import { UploadRequestOptions, UploadUserFile, UploadFile, - UploadProps -} from 'element-plus'; -import { uploadFileApi, deleteFileApi } from '@/api/file'; + UploadProps, +} from "element-plus"; +import { uploadFileApi, deleteFileApi } from "@/api/file"; -const emit = defineEmits(['update:modelValue']); +const emit = defineEmits(["update:modelValue"]); const props = defineProps({ /** @@ -40,36 +40,36 @@ const props = defineProps({ */ modelValue: { type: Array, - default: [] as Array + default: [] as Array, }, /** * 文件上传数量限制 */ limit: { type: Number, - default: 5 - } + default: 10, + }, }); -const previewImgUrl = ref(''); +const previewImgUrl = ref(""); const dialogVisible = ref(false); const fileList = ref([] as UploadUserFile[]); watch( () => props.modelValue, (newVal: string[]) => { - const filePaths = fileList.value.map(file => file.url); + const filePaths = fileList.value.map((file) => file.url); // 监听modelValue文件集合值未变化时,跳过赋值 if ( filePaths.length > 0 && filePaths.length === newVal.length && - filePaths.every(x => newVal.some(y => y === x)) && - newVal.every(y => filePaths.some(x => x === y)) + filePaths.every((x) => newVal.some((y) => y === x)) && + newVal.every((y) => filePaths.some((x) => x === y)) ) { return; } - fileList.value = newVal.map(filePath => { + fileList.value = newVal.map((filePath) => { return { url: filePath } as UploadUserFile; }); }, @@ -87,17 +87,17 @@ async function handleUpload(options: UploadRequestOptions): Promise { // 上传成功需手动替换文件路径为远程URL,否则图片地址为预览地址 blob:http:// const fileIndex = fileList.value.findIndex( - file => file.uid == (options.file as any).uid + (file) => file.uid == (options.file as any).uid ); fileList.value.splice(fileIndex, 1, { name: fileInfo.name, - url: fileInfo.url + url: fileInfo.url, } as UploadUserFile); emit( - 'update:modelValue', - fileList.value.map(file => file.url) + "update:modelValue", + fileList.value.map((file) => file.url) ); } @@ -111,8 +111,8 @@ function handleRemove(removeFile: UploadFile) { deleteFileApi(filePath).then(() => { // 删除成功回调 emit( - 'update:modelValue', - fileList.value.map(file => file.url) + "update:modelValue", + fileList.value.map((file) => file.url) ); }); } @@ -123,7 +123,7 @@ function handleRemove(removeFile: UploadFile) { */ function handleBeforeUpload(file: UploadRawFile) { if (file.size > 2 * 1048 * 1048) { - ElMessage.warning('上传图片不能大于2M'); + ElMessage.warning("上传图片不能大于2M"); return false; } return true; @@ -132,7 +132,7 @@ function handleBeforeUpload(file: UploadRawFile) { /** * 预览图片 */ -const previewImg: UploadProps['onPreview'] = uploadFile => { +const previewImg: UploadProps["onPreview"] = (uploadFile) => { previewImgUrl.value = uploadFile.url!; dialogVisible.value = true; };