feat: 增加全上传问题

.env

@@ -1,5 +1,5 @@
 VITE_APP_APP="fire"
-VITE_SEVER_URL="http://hccj.xjxf.com:18008/"
+VITE_SEVER_URL="https://hccj.xjxf.com:18008"
 VITE_DEVCODE_URL="https://192.168.0.25/code"
 VITE_SWKK_URL="https://test.4dkankan.com"
 VITE_SERVICE_URL="https://test.4dkankan.com"

.env.development

@@ -1,5 +1,5 @@
 VITE_APP_APP="fire"
-VITE_SEVER_URL="http://hccj.xjxf.com:18008/"
+VITE_SEVER_URL="https://hccj.xjxf.com:18008"
 # VITE_SEVER_URL="https://xj-mix3d.4dkankan.com"
 VITE_DEVCODE_URL="https://192.168.0.25/code"
 VITE_SWKK_URL="https://test.4dkankan.com"

src/view/case/addPhotoFileAll.vue

@@ -15,14 +15,16 @@
         :http-request="httpsApi"
         :on-preview="previewFile"
         :on-exceed="handleExceed"
-        :accept="photoFormats"
+        :accept="photoFormats.join(',')"
         :on-remove="handleRemove"
       >
         <el-button type="primary" :disabled="!!file">
           <el-icon><Upload /></el-icon>上传
         </el-button>
         <template v-slot:tip>
-          <div class="el-upload__tip">注：可上传{{ size }}以内的{{ photoFormatDesc }}</div>
+          <div class="el-upload__tip">
+            注：可上传{{ size }}以内的{{ photoFormatDesc }}
+          </div>
         </template>
         <template v-slot:file="{ file }">
           <div class="file" @click.stop="previewFile()">
@@ -63,7 +65,7 @@ import { saveOrAndSave, CaseImg } from "@/store/case";
 import { ElMessage } from "element-plus";
 import { computed, ref, watch, watchEffect } from "vue";
 import { QuiskExpose } from "@/helper/mount";
-import type { UploadProps } from 'element-plus'
+import type { UploadProps } from "element-plus";
 
 const props = defineProps<{
   caseId: number;
@@ -82,7 +84,7 @@ const caseFile = ref<CaseImg>({
   id: props.data?.id,
   imgUrl: props.data.imgUrl,
   imgInfo: props.data.imgInfo,
-  sort: props.data?.sort || '',
+  sort: props.data?.sort || "",
 } as any);
 
 const { size, previewFile, file, accept, percentage, format } = useUpload({
@@ -91,83 +93,96 @@ const { size, previewFile, file, accept, percentage, format } = useUpload({
 });
 const handleExceed = () => {
   return ElMessage.error(`最大上传数量为10个`);
-}
+};
 const upload = async (file: File) => {
-    const fileType = file.name
-      .substring(file.name.lastIndexOf("."))
-      .toUpperCase();
+  const fileType = file.name
+    .substring(file.name.lastIndexOf("."))
+    .toUpperCase();
 
-    if (!photoFormats.some((type) => type.toUpperCase() === fileType)) {
-      ElMessage.error(`请上传${photoFormatDesc}`);
-      return false;
-    } else if (file.size > maxFileSize) {
-      ElMessage.error(`请上传${size.value}以内的文件`);
-      return false;
-    } else {
-      console.log('file', file)
-      fileList.value.push(file);
-      await defaultUpload(
-        file,
-        (val) => (percentage.value = val)
-      );
-      if (fileType === ".RAW") {
-      }
-      percentage.value = undefined;
-      return true;
+  if (!photoFormats.some((type) => type.toUpperCase() === fileType)) {
+    ElMessage.error(`请上传${photoFormatDesc}`);
+    return false;
+  } else if (file.size > maxFileSize) {
+    ElMessage.error(`请上传${size.value}以内的文件`);
+    return false;
+  } else {
+    console.log("file", file);
+    fileList.value.push(file);
+    await defaultUpload(file, (val) => (percentage.value = val));
+    if (fileType === ".RAW") {
     }
-  };
-const fileList = ref([])
-const formatDesc = computed(() =>
-DrawFormatDesc
-);
-watch(props, newValue => {
-  caseFile.value.id = newValue.data.id;
-  caseFile.value.imgInfo = newValue.data.imgInfo;
-  caseFile.value.imgUrl = newValue.data.imgUrl;
-  caseFile.value.sort = newValue.data.sort;
-  if(newValue.data.imgUrl){
-    file.value = {
-    name: newValue.data.imgInfo || '',
-    url: newValue.data.imgUrl || '',
+    percentage.value = undefined;
+    return true;
   }
-  }
-},{ immediate: true })
+};
+const fileList = ref([]);
+const formatDesc = computed(() => DrawFormatDesc);
+watch(
+  props,
+  (newValue) => {
+    caseFile.value.id = newValue.data.id;
+    caseFile.value.imgInfo = newValue.data.imgInfo;
+    caseFile.value.imgUrl = newValue.data.imgUrl;
+    caseFile.value.sort = newValue.data.sort;
+    if (newValue.data.imgUrl) {
+      file.value = {
+        name: newValue.data.imgInfo || "",
+        url: newValue.data.imgUrl || "",
+      };
+    }
+  },
+  { immediate: true }
+);
 watchEffect(() => {
   if (file.value?.name) {
     caseFile.value.imgInfo = file.value?.name.substring(0, 50);
   }
 });
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles)
-}
+const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles);
+};
 const removeFile = (file) => {
-  fileList.value = fileList.value.filter((item) => item.raw.url !== file.raw.url);
+  fileList.value = fileList.value.filter(
+    (item) => item.raw.url !== file.raw.url
+  );
 };
-const httpsApi = async ({file})=> {
-  console.log('httpsApi', file)
+const httpsApi = async ({ file }) => {
+  console.log("httpsApi", file);
   let fileUrl = await uploadFile(file);
 
-  file.url = fileUrl
-  console.log('httpsApi', file, fileUrl)
-}
+  file.url = fileUrl;
+  console.log("httpsApi", file, fileUrl);
+};
 
 defineExpose<QuiskExpose>({
   async submit() {
-    console.log('defineExpose', fileList.value)
+    console.log("defineExpose", fileList.value);
     if (!fileList.value.length) {
       ElMessage.error("请上传照片");
       throw "请上传照片";
     }
-    console.log('defineExpose', caseFile.value, file.value)
-    let imgUrls = fileList.value.map(item => {
-      return {
-        imgUrl: item.raw && item.raw.url,
-        imgInfo: item.name.replace(/\.[^/.]+$/, ""),
-        caseId: props.caseId,
-      }
-    })
-    await saveOrAndSave({ imgUrls });
-    return caseFile.value;
+    // console.log("defineExpose", caseFile.value, file.value);
+    const af = fileList.value.filter(
+      (item) => item.raw && item.raw?.url && item.raw?.url.length > 0
+    );
+
+    const isAllupload = af.length === fileList.value.length;
+
+    if (isAllupload) {
+      let imgUrls = fileList.value.map((item) => {
+        return {
+          imgUrl: item.raw && item.raw.url,
+          imgInfo: item.name.replace(/\.[^/.]+$/, ""),
+          caseId: props.caseId,
+        };
+      });
+      await saveOrAndSave({ imgUrls });
+    } else {
+      ElMessage.warning("上传中，请等候！");
+      throw "上传中，请等候！";
+    }
+
+    // return caseFile.value;
   },
 });
 </script>