فهرست منبع

fix: 上传图片尺寸限制,以及价目表只能上传图片

sgc 3 هفته پیش
والد
کامیت
0af3ee4ae3
2فایلهای تغییر یافته به همراه38 افزوده شده و 2 حذف شده
  1. 28 0
      src/api/upload.js
  2. 10 2
      src/views/priceList/edit.vue

+ 28 - 0
src/api/upload.js

@@ -17,6 +17,33 @@ const OSS_FINALIZE_PATH = "/upload/oss/finalize";
 /** 浏览器默认可达;内网可配 VITE_OSS_UPLOAD_ENDPOINT=oss-cn-beijing-internal.aliyuncs.com */
 const DEFAULT_OSS_UPLOAD_ENDPOINT = "oss-cn-beijing.aliyuncs.com";
 
+/** 商户 Web 端上传统一上限:图 20MB、视频 200MB */
+const WEB_UPLOAD_IMAGE_MAX_BYTES = 20 * 1024 * 1024;
+const WEB_UPLOAD_VIDEO_MAX_BYTES = 200 * 1024 * 1024;
+const WEB_UPLOAD_TIP_IMAGE = "图片建议不超过 20MB";
+const WEB_UPLOAD_TIP_VIDEO = "视频建议不超过 200MB";
+
+/**
+ * @param {File[]} fileArr
+ * @param {string} [fileType] image | video
+ */
+function assertWebUploadFilesWithinLimit(fileArr, fileType) {
+  const kind = fileType === "video" ? "video" : fileType === "image" ? "image" : "";
+  for (const file of fileArr) {
+    const size = Number(file?.size);
+    if (!Number.isFinite(size) || size <= 0) continue;
+    const mime = String(file?.type || "").toLowerCase();
+    const isVideo = kind === "video" || mime.startsWith("video/");
+    const isImage = kind === "image" || mime.startsWith("image/");
+    if (isVideo && size > WEB_UPLOAD_VIDEO_MAX_BYTES) {
+      throw new Error(WEB_UPLOAD_TIP_VIDEO);
+    }
+    if (isImage && size > WEB_UPLOAD_IMAGE_MAX_BYTES) {
+      throw new Error(WEB_UPLOAD_TIP_IMAGE);
+    }
+  }
+}
+
 /**
  * 已由 uploadFilesToOss 弹出过 ElMessage,调用方勿重复 error
  * @param {unknown} err
@@ -893,6 +920,7 @@ export async function uploadFilesToOss(files, _fileType, options = {}) {
   }
 
   try {
+    assertWebUploadFilesWithinLimit(fileArr, _fileType);
     const runUpload = async signal => {
       const uploadedUrls = [];
       const fetchOpts = signal ? { signal } : {};

+ 10 - 2
src/views/priceList/edit.vue

@@ -44,6 +44,7 @@
               <UploadImgs
                 v-model:file-list="imageFileList"
                 :api="handleCustomImageUpload"
+                :file-type="PRICE_LIST_IMAGE_FILE_TYPES"
                 :limit="9"
                 :file-size="20"
                 :width="'100px'"
@@ -241,6 +242,7 @@
               <UploadImgs
                 v-model:file-list="detailImageFileList"
                 :api="handleCustomImageUpload"
+                :file-type="PRICE_LIST_IMAGE_FILE_TYPES"
                 :limit="9"
                 :file-size="20"
                 :width="'100px'"
@@ -377,6 +379,9 @@ import { localGet } from "@/utils";
 import UploadImgs from "@/components/Upload/Imgs.vue";
 import { uploadFilesToOss } from "@/api/upload.js";
 
+/** 价目表仅图片,不含视频(UploadImgs 默认 fileType 含 video/*) */
+const PRICE_LIST_IMAGE_FILE_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/heic", "image/heif"];
+
 const router = useRouter();
 const route = useRoute();
 const ruleFormRef = ref<FormInstance>();
@@ -557,8 +562,11 @@ const handleCustomImageUpload = async (formData: FormData, options?: Record<stri
   if (!file) {
     throw new Error("请选择文件");
   }
-  const isVideo = typeof file.type === "string" && file.type.startsWith("video/");
-  const urls = await uploadFilesToOss(file, isVideo ? "video" : "image", options ?? {});
+  const mime = typeof file.type === "string" ? file.type : "";
+  if (mime.startsWith("video/") || /\.(mp4|m4v|webm|ogg|mov|avi)(\?.*)?$/i.test(file.name || "")) {
+    throw new Error("仅支持上传图片");
+  }
+  const urls = await uploadFilesToOss(file, "image", options ?? {});
   const fileUrl = urls[0];
   if (!fileUrl) {
     throw new Error("上传失败,未返回地址");