Merge remote-tracking branch 'origin/master'

src/components/Upload/Image.vue

@@ -66,7 +66,7 @@ interface UploadFileProps {
 	drag?: boolean // 是否支持拖拽上传 ==> 非必传（默认为 true）
 	disabled?: boolean // 是否禁用上传组件 ==> 非必传（默认为 false）
 	fileSize?: number // 图片大小限制 ==> 非必传（默认为 5M）
-	fileType?: File.ImageMimeType[] // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+	fileType?: string[] // 图片类型限制 ==> 非必传（默认 JPEG、PNG、GIF、WebP）
 	height?: string // 组件高度 ==> 非必传（默认为 150px）
 	width?: string // 组件宽度 ==> 非必传（默认为 150px）
 	borderRadius?: string // 组件边框圆角 ==> 非必传（默认为 8px）
@@ -82,7 +82,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
 	drag: true,
 	disabled: false,
 	fileSize: 5,
-	fileType: () => ["image/jpeg", "image/png", "image/gif"],
+	fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
 	height: "150px",
 	width: "150px",
 	borderRadius: "8px",
@@ -116,21 +116,17 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
 	let formData = new FormData()
 	formData.append("file", options.file)
 	formData.append("dir", props.dir)
-	try {
-		const { data } = await request({
-			url: props.uploadFileUrl,
-			method: "post",
-			headers: {
-				"Content-Type": "multipart/form-data",
-			},
-			data: formData,
-		})
-		emit("update:imageUrl", data.url)
-		// 调用 el-form 内部的校验方法（可自动校验）
-		formItemContext?.prop && formContext?.validateField([formItemContext.prop as string])
-	} catch (error) {
-		options.onError(error as any)
-	}
+	const { data } = await request({
+		url: props.uploadFileUrl,
+		method: "post",
+		headers: {
+			"Content-Type": "multipart/form-data",
+		},
+		data: formData,
+	})
+	emit("update:imageUrl", data.url)
+	// 调用 el-form 内部的校验方法（可自动校验）
+	formItemContext?.prop && formContext?.validateField([formItemContext.prop as string])
 }
 
 /**
@@ -186,10 +182,10 @@ const uploadSuccess = () => {
 /**
  * @description 图片上传错误
  * */
-const uploadError = () => {
+const uploadError = (error: any) => {
 	ElNotification({
 		title: "温馨提示",
-		message: "图片上传失败，请您重新上传！",
+		message: error?.msg || error?.message || "图片上传失败，请您重新上传！",
 		type: "error",
 	})
 }

src/components/Upload/Images.vue

@@ -42,7 +42,7 @@ interface UploadFileProps {
 }
 const props = withDefaults(defineProps<UploadFileProps>(), {
 	disabled: false,
-	fileType: () => ["image/jpeg", "image/png", "image/gif"],
+	fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
 	fileSize: 5,
 	height: "150px",
 	width: "150px",
@@ -66,20 +66,16 @@ const formContext = inject(formContextKey, void 0)
 const handleHttpUpload = async (options: UploadRequestOptions) => {
 	let formData = new FormData()
 	formData.append("file", options.file)
-	try {
-		const res = await request({
-			url: "/admin/sys-file/upload",
-			method: "post",
-			headers: {
-				"Content-Type": "multipart/form-data",
-			},
-			data: formData,
-		})
-		if (res.code == 0) {
-			return res
-		}
-	} catch (error) {
-		options.onError(error as any)
+	const res = await request({
+		url: "/admin/sys-file/upload",
+		method: "post",
+		headers: {
+			"Content-Type": "multipart/form-data",
+		},
+		data: formData,
+	})
+	if (res.code == 0) {
+		return res
 	}
 }
 
@@ -151,10 +147,10 @@ const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
 /**
  * @description 图片上传错误
  * */
-const uploadError = () => {
+const uploadError = (error: any) => {
 	ElNotification({
 		title: "温馨提示",
-		message: "图片上传失败，请您重新上传！",
+		message: error?.msg || error?.message || "图片上传失败，请您重新上传！",
 		type: "error",
 	})
 }

src/components/Upload/qnImages.vue

@@ -31,7 +31,7 @@ interface UploadFileProps {
 }
 const props = withDefaults(defineProps<UploadFileProps>(), {
     disabled: false,
-    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
     fileSize: 5,
     height: "150px",
     width: "150px",
@@ -51,20 +51,16 @@ const formContext = inject(formContextKey, void 0)
 const handleHttpUpload = async (options: UploadRequestOptions) => {
     let formData = new FormData()
     formData.append("file", options.file)
-    try {
-        const res = await request({
-            url: "/admin/sys-file/qn/upload",
-            method: "post",
-            headers: {
-                "Content-Type": "multipart/form-data",
-            },
-            data: formData,
-        })
-        if (res.code == 0) {
-            return res
-        }
-    } catch (error) {
-        options.onError(error as any)
+    const res = await request({
+        url: "/admin/sys-file/qn/upload",
+        method: "post",
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+        data: formData,
+    })
+    if (res.code == 0) {
+        return res
     }
 }
 
@@ -137,10 +133,10 @@ const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
 /**
  * @description 图片上传错误
  * */
-const uploadError = () => {
+const uploadError = (error: any) => {
     ElNotification({
         title: "温馨提示",
-        message: "图片上传失败，请您重新上传！",
+        message: error?.msg || error?.message || "图片上传失败，请您重新上传！",
         type: "error",
     })
 }