Explorar el Código

fix: 修改上传文件组件

Tong hace 2 años
padre
commit
c2c077742a
Se han modificado 2 ficheros con 32 adiciones y 18 borrados
  1. 3 0
      src/api/sys/model/uploadModel.ts
  2. 29 18
      src/components/Upload/src/UploadModal.vue

+ 3 - 0
src/api/sys/model/uploadModel.ts

@@ -2,4 +2,7 @@ export interface UploadApiResult {
   message: string;
   code: number;
   url: string;
+  data: {
+    absolutePath: string;
+  };
 }

+ 29 - 18
src/components/Upload/src/UploadModal.vue

@@ -14,7 +14,12 @@
     :cancelButtonProps="{ disabled: isUploadingRef }"
   >
     <template #centerFooter>
-      <a-button @click="handleStartUpload" color="success" :disabled="!getIsSelectFile" :loading="isUploadingRef">
+      <a-button
+        @click="handleStartUpload"
+        color="success"
+        :disabled="!getIsSelectFile"
+        :loading="isUploadingRef"
+      >
         {{ getUploadBtnText }}
       </a-button>
     </template>
@@ -77,7 +82,6 @@
       const fileListRef = ref<FileItem[]>([]);
       const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 
-      const { t } = useI18n();
       const [register, { closeModal }] = useModalInner();
 
       const { getStringAccept, getHelpText } = useUploadType({
@@ -91,12 +95,15 @@
 
       const getIsSelectFile = computed(() => {
         return (
-          fileListRef.value.length > 0 && !fileListRef.value.every(item => item.status === UploadResultStatus.SUCCESS)
+          fileListRef.value.length > 0 &&
+          !fileListRef.value.every(item => item.status === UploadResultStatus.SUCCESS)
         );
       });
 
       const getOkButtonProps = computed(() => {
-        const someSuccess = fileListRef.value.some(item => item.status === UploadResultStatus.SUCCESS);
+        const someSuccess = fileListRef.value.some(
+          item => item.status === UploadResultStatus.SUCCESS,
+        );
         return {
           disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
         };
@@ -105,10 +112,10 @@
       const getUploadBtnText = computed(() => {
         const someError = fileListRef.value.some(item => item.status === UploadResultStatus.ERROR);
         return isUploadingRef.value
-          ? t('component.upload.uploading')
+          ? locales.upload.uploading
           : someError
-          ? t('component.upload.reUploadFailed')
-          : t('component.upload.startUpload');
+          ? locales.upload.reUploadFailed
+          : locales.upload.startUpload;
       });
 
       // 上传前校验
@@ -117,7 +124,7 @@
         const { maxSize } = props;
         // 设置最大值,则判断
         if (maxSize && file.size / 1024 / 1024 >= maxSize) {
-          createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
+          createMessage.error(locales.upload.maxSizeMultiple, maxSize);
           return false;
         }
 
@@ -169,8 +176,8 @@
           return warn('upload api must exist and be a function');
         }
         try {
-          item.status = UploadResultStatus.UPLOADING;
-          const { data } = await props.api?.(
+          // eslint-disable-next-line no-unsafe-optional-chaining
+          const { data } = await props?.api?.(
             {
               data: {
                 ...(props.uploadParams || {}),
@@ -186,6 +193,7 @@
           );
           item.status = UploadResultStatus.SUCCESS;
           item.responseData = data;
+          debugger;
           return {
             success: true,
             error: null,
@@ -204,15 +212,18 @@
       async function handleStartUpload() {
         const { maxNumber } = props;
         if ((fileListRef.value.length + props.previewFileList?.length ?? 0) > maxNumber) {
-          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+          return createMessage.warning(locales.upload.maxNumber, maxNumber);
         }
         try {
           isUploadingRef.value = true;
           // 只上传不是成功状态的
-          const uploadFileList = fileListRef.value.filter(item => item.status !== UploadResultStatus.SUCCESS) || [];
+          const uploadFileList =
+            fileListRef.value.filter(item => item.status !== UploadResultStatus.SUCCESS) || [];
           const data = await Promise.all(
             uploadFileList.map(item => {
-              return uploadApiByItem(item);
+              const result = uploadApiByItem(item);
+              console.log('result::::::::::::', result);
+              return result;
             }),
           );
           isUploadingRef.value = false;
@@ -230,22 +241,22 @@
         const { maxNumber } = props;
 
         if (fileListRef.value.length > maxNumber) {
-          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+          return createMessage.warning(locales.upload.maxNumber, maxNumber);
         }
         if (isUploadingRef.value) {
-          return createMessage.warning(t('component.upload.saveWarn'));
+          return createMessage.warning(locales.upload.saveWarn);
         }
         const fileList: string[] = [];
 
         for (const item of fileListRef.value) {
           const { status, responseData } = item;
           if (status === UploadResultStatus.SUCCESS && responseData) {
-            fileList.push(responseData.url);
+            fileList.push(responseData.data.absolutePath);
           }
         }
         // 存在一个上传成功的即可保存
         if (fileList.length <= 0) {
-          return createMessage.warning(t('component.upload.saveError'));
+          return createMessage.warning(locales.upload.saveError);
         }
         fileListRef.value = [];
         closeModal();
@@ -258,7 +269,7 @@
           fileListRef.value = [];
           return true;
         } else {
-          createMessage.warning(t('component.upload.uploadWait'));
+          createMessage.warning(locales.upload.uploadWait);
           return false;
         }
       }