@@ -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方法