🚀 企业认证

src/components/Upload/src/BasicUpload.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
     <Space>
-      <a-button type="primary" preIcon="carbon:cloud-upload" @click="openUploadModal">
+      <a-button type="primary"
-        {{ t('component.upload.upload') }}
+                preIcon="carbon:cloud-upload"
+                @click="openUploadModal"
+      >{{ t('component.upload.upload') }}
       </a-button>
       <Tooltip v-if="showPreview" placement="bottom">
         <template #title>
@@ -19,20 +21,16 @@
         </a-button>
       </Tooltip>
     </Space>
-    <UploadModal
+    <UploadModal v-bind="bindValue"
-      v-bind="bindValue"
+                 :previewFileList="fileList"
-      :previewFileList="fileList"
+                 @register="registerUploadModal"
-      @register="registerUploadModal"
+                 @change="handleChange"
-      @change="handleChange"
+                 @delete="handleDelete"
-      @delete="handleDelete"
-      @success="handleSuccess"
     />
-
+    <UploadPreviewModal :value="fileList"
-    <UploadPreviewModal
+                        @register="registerPreviewModal"
-      :value="fileList"
+                        @list-change="handlePreviewChange"
-      @register="registerPreviewModal"
+                        @delete="handlePreviewDelete"
-      @list-change="handlePreviewChange"
-      @delete="handlePreviewDelete"
     />
   </div>
 </template>
@@ -53,7 +51,6 @@
     components: { UploadModal, Space, UploadPreviewModal, Icon, Tooltip },
     props: uploadContainerProps,
     emits: ['change', 'delete', 'success', 'preview-delete', 'update:value'],
-
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
       // 上传modal
@@ -97,10 +94,6 @@
         emit('change', fileList.value);
       }
 
-      function handleSuccess() {
-        emit('success', closeUploadModal);
-      }
-
       function handleDelete(record: Recordable) {
         emit('delete', record);
       }
@@ -110,9 +103,9 @@
       }
 
       return {
+        closeUploadModal,
         registerUploadModal,
         openUploadModal,
-        handleSuccess,
         handleChange,
         handlePreviewChange,
         registerPreviewModal,

src/components/Upload/src/UploadModal.vue

@@ -69,24 +69,18 @@
     props: {
       ...basicProps,
       previewFileList: {
-        type: Array as PropType<FileItem[]>,
+        type: Array as PropType<string[]>,
         default: () => [],
       },
     },
     emits: ['change', 'register', 'delete', 'success'],
     setup(props, { emit }) {
-      const state = reactive<{ fileList: FileItem[] }>({
+      const { t } = useI18n();
-        fileList: [],
-      });
-
-      // 是否正在上传
       const isUploadingRef = ref(false);
       const fileListRef = ref<FileItem[]>([]);
       const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-
-      const { t } = useI18n();
       const [register, { closeModal }] = useModalInner();
-
+      const { createMessage } = useMessage();
       const { getStringAccept, getHelpText } = useUploadType({
         acceptRef: accept,
         helpTextRef: helpText,
@@ -94,28 +88,16 @@
         maxSizeRef: maxSize,
       });
 
-      const { createMessage } = useMessage();
+      const getIsSelectFile = computed(() =>
-
+        (fileListRef.value.length > 0 && !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)));
-      const getIsSelectFile = computed(() => {
-        return (
-            fileListRef.value.length > 0 &&
-            !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)
-        );
-      });
 
       const getOkButtonProps = computed(() => {
-        const someSuccess = fileListRef.value.some(
+        const someSuccess = fileListRef.value.some(item => item.status === UploadResultStatus.SUCCESS);
-            (item) => item.status === UploadResultStatus.SUCCESS,
+        return { disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess };
-        );
-        return {
-          disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
-        };
       });
 
       const getUploadBtnText = computed(() => {
-        const someError = fileListRef.value.some(
+        const someError = fileListRef.value.some(item => item.status === UploadResultStatus.ERROR);
-            (item) => item.status === UploadResultStatus.ERROR,
-        );
         return isUploadingRef.value
           ? t('component.upload.uploading')
           : someError
@@ -147,10 +129,7 @@
           getBase64WithFile(file).then(({ result: thumbUrl }) => {
             fileListRef.value = [
               ...unref(fileListRef),
-              {
+              { thumbUrl, ...commonItem }
-                thumbUrl,
-                ...commonItem,
-              },
             ];
           });
         } else {
@@ -168,16 +147,12 @@
 
       async function uploadApiByItem(item: FileItem) {
         const { api } = props;
-        if (!api || !isFunction(api)) {
+        if (!api || !isFunction(api))
           return warn('upload api must exist and be a function');
-        }
         try {
           item.status = UploadResultStatus.UPLOADING;
-          const { data } = await props.api?.(
+          const { data } = await props.api?.({
-            {
+              data: {...(props.uploadParams || {})},
-              data: {
-                ...(props.uploadParams || {}),
-              },
               file: item.file,
               name: props.name,
               filename: props.filename,
@@ -194,7 +169,6 @@
             error: null,
           };
         } catch (e) {
-          console.log(e);
           item.status = UploadResultStatus.ERROR;
           return {
             success: false,
@@ -212,20 +186,13 @@
         try {
           isUploadingRef.value = true;
           // 只上传不是成功状态的
-          const uploadFileList =
+          const uploadFileList = fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
-              fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
+          const result = await Promise.all(uploadFileList.map((item) => uploadApiByItem(item)));
-          const data = await Promise.all(
-              uploadFileList.map((item) => {
-                return uploadApiByItem(item);
-              }),
-          );
           isUploadingRef.value = false;
-          // 生产环境:抛出错误
+          const errorList = result.filter((item: any) => !item.success);
-          const errorList = data.filter((item: any) => !item.success);
           if (errorList.length > 0) throw errorList;
-          useTimeoutFn(() => {
+          // 当关闭上传保存按钮，默认选择开始上传按钮充当保存按钮
-            emit('success');
+          !props.showUploadSaveBtn && handleOk();
-          }, 300);
         } catch (e) {
           isUploadingRef.value = false;
           throw e;
@@ -280,7 +247,6 @@
         getOkButtonProps,
         beforeUpload,
         fileListRef,
-        state,
         isUploadingRef,
         handleStartUpload,
         handleOk,

src/components/Upload/src/useUpload.ts

@@ -2,11 +2,11 @@ import { Ref, unref, computed } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 const { t } = useI18n();
 export function useUploadType({
-                                acceptRef,
+  acceptRef,
-                                helpTextRef,
+  helpTextRef,
-                                maxNumberRef,
+  maxNumberRef,
-                                maxSizeRef,
+  maxSizeRef,
-                              }: {
+}: {
   acceptRef: Ref<string[]>;
   helpTextRef: Ref<string>;
   maxNumberRef: Ref<number>;

src/views/system/file/index.vue

@@ -13,7 +13,7 @@
                      :api="commonUpload"
                      :accept="['image/*']"
                      multiple
-                     @success="handleUploadSuccess"
+                     @change="handleUploadSave"
         />
         <a-button v-auth="['file_del']"
                   type="primary"
@@ -107,10 +107,9 @@
     state.multiple = !rowSelection.length;
   }
 
-  /** 处理上传成功回调 */
+  /** 处理上传成功保存回调 */
-  function handleUploadSuccess(closeUploadModal: Fn) {
+  function handleUploadSave(fileList: string[]) {
     state.fileList = [];
-    closeUploadModal();
     handleRefreshTable();
   }