Przeglądaj źródła

修改图片上传问题

sunshibo 2 miesięcy temu
rodzic
commit
f68bfa9ed0

+ 13 - 3
src/components/Upload/Imgs.vue

@@ -195,12 +195,22 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
   try {
     const api = props.api ?? uploadImg;
     const { data } = await api(formData);
-    // 先调用 el-upload 的成功回调,确保文件列表更新
+    // 无论是否显示成功提示,都先把当前文件的 url 设为服务器地址,否则父组件校验会认为仍是 blob 而报「请上传」
+    const fileUrl =
+      typeof data === "string"
+        ? data
+        : Array.isArray(data) && data.length > 0
+          ? data[0]
+          : (data?.fileUrl ?? (data && (Object.values(data)[0] as string)) ?? "");
+    if (fileUrl) {
+      (options.file as UploadFile).url = fileUrl;
+      (options.file as UploadFile).status = "success";
+    }
     options.onSuccess(data);
-    // 然后调用自定义成功回调(如果提供了的话),即使回调失败也不影响文件列表
+    emit("update:fileList", _fileList.value);
     if (props.onSuccess) {
       try {
-        const result = props.onSuccess(data.fileUrl ? data.fileUrl : data[0]);
+        const result = props.onSuccess(data?.fileUrl ? data.fileUrl : (data?.[0] ?? fileUrl));
         // 如果回调返回 Promise,等待它完成(但不影响上传成功状态)
         if (result && typeof result.then === "function") {
           result.catch((callbackError: any) => {

+ 33 - 2
src/views/storeDecoration/personnelConfig/index.vue

@@ -768,8 +768,39 @@ const syncFileListFromComponent = async () => {
   }
 };
 
-// 背景图片上传成功回调(仅做校验触发,不重复添加文件,避免与 UploadImgs 的 v-model/on-change 重复导致多传)
-const handleBackgroundImageSuccess = async (_url: string) => {
+// 背景图片上传成功回调:用接口返回的服务器 URL 直接修正 formData(把 blob 替换为服务器地址),再触发校验
+const handleBackgroundImageSuccess = async (serverUrl: string) => {
+  if (!serverUrl || typeof serverUrl !== "string") return;
+  const url = serverUrl.trim();
+  const list = formData.backgroundImages;
+  let replaceIndex = -1;
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+    if (!item) continue;
+    const u = item.url && typeof item.url === "string" ? item.url.trim() : "";
+    if (!u || u.startsWith("blob:")) {
+      replaceIndex = i;
+      break;
+    }
+  }
+  if (replaceIndex >= 0) {
+    formData.backgroundImages = list.map((item, i) =>
+      i === replaceIndex ? { ...item, url, status: "success" as const } : item
+    ) as UploadUserFile[];
+  } else {
+    const hasUrl = list.some((f: UploadUserFile) => f?.url && String(f.url).trim() === url);
+    if (!hasUrl) {
+      formData.backgroundImages = [
+        ...list,
+        {
+          uid: `bg-${Date.now()}-${Math.random()}`,
+          name: url.split("/").pop() || "image",
+          url,
+          status: "success" as const
+        } as unknown as UploadUserFile
+      ];
+    }
+  }
   await nextTick();
   if (formRef.value) {
     formRef.value.validateField("backgroundImages");