diff --git a/src/components/Upload/ImageUpload.vue b/src/components/Upload/ImageUpload.vue index 08aed9ab..0bbe42ea 100644 --- a/src/components/Upload/ImageUpload.vue +++ b/src/components/Upload/ImageUpload.vue @@ -19,7 +19,7 @@
-
+
@@ -33,7 +33,7 @@
@@ -43,10 +43,10 @@ @@ -121,7 +121,6 @@ const props = defineProps({ }; }, }, - /** * 是否多图上传 */ @@ -138,12 +137,11 @@ const modelValue = defineModel("modelValue", { default: () => "", }); -const viewVisible = ref(false); -const initialIndex = ref(0); +const previewVisible = ref(false); // 是否显示预览 +const previewImageIndex = ref(0); // 预览的图片索引 const fileList = ref([]); // 默认上传文件 -const uploadedImgUrls = ref([]); // 已上传的图片 -const previewImgUrls = ref([]); +const uploadedImageUrls = ref([]); // 已上传的图片 // 添加一个ref来引用el-upload组件 const uploadRef = ref(); @@ -151,14 +149,13 @@ const uploadRef = ref(); watch( () => modelValue.value, (newValue) => { - if (!props.multiple) { - return; + if (Array.isArray(newValue)) { + fileList.value = newValue.map((filePath) => { + return { url: filePath } as UploadUserFile; + }); } else { - if (Array.isArray(newValue)) { - fileList.value = newValue.map((filePath) => { - return { url: filePath } as UploadUserFile; - }); - } + fileList.value = []; + uploadedImageUrls.value = []; } }, { immediate: true } @@ -188,28 +185,6 @@ function handleBeforeUpload(file: UploadRawFile) { ElMessage.warning("上传图片不能大于" + props.maxSize + "M"); return false; } - // 判断文件类型 - // 获取文件后缀名 - const fileExt = file.name.split(".").pop(); - if (!fileExt) { - ElMessage.warning("上传图片格式错误,支持的文件类型:" + props.supportFileType.join(",")); - return false; - } - // 给文件后缀名转换为小写 - const lowerCaseFileExt = fileExt.toLowerCase(); - // 判断文件后缀名是否在支持的文件类型中 - if (props.supportFileType.length > 0) { - let isSupport = false; - props.supportFileType.forEach((type) => { - if (type.toLowerCase() === lowerCaseFileExt) { - isSupport = true; - } - }); - if (!isSupport) { - ElMessage.warning("上传图片格式错误,支持的文件类型:" + props.supportFileType.join(",")); - return false; - } - } return true; } @@ -248,7 +223,7 @@ function handleUpload(options: UploadRequestOptions) { const handleSuccess = (fileInfo: FileInfo) => { ElMessage.success("上传成功"); const { url } = fileInfo; - uploadedImgUrls.value.push(url); + uploadedImageUrls.value.push(url); if (props.multiple && Array.isArray(modelValue.value)) { modelValue.value.push(url); } else { @@ -270,16 +245,16 @@ const handleError = (error: any) => { * 预览图片 */ const previewImg = (path: string) => { - previewImgUrls.value = fileList.value.map((file) => file.url!); + previewImageUrls.value = fileList.value.map((file) => file.url!); initialIndex.value = fileList.value.findIndex((file) => file.url === path); - viewVisible.value = true; + previewVisible.value = true; }; /** * 关闭预览 */ const closePreview = () => { - viewVisible.value = false; + previewVisible.value = false; }; // 修改triggerUpload方法