调整后的ImageUpload组件无法正常使用且无法使用单个上传[#3344] (#3345)

* Update typing.ts * 默认上传单个 * fix(ImageUpload): 修正图片单个上传&返回结果未进行处理
vbenjs · Nov 27, 2023 · 8b516b7 · 8b516b7
1 parent 97b76ea
commit 8b516b7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue
@@ -26,8 +26,8 @@
 <script lang="ts" setup>
   import { ref, toRefs, watch } from 'vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
-  import { Upload, Modal } from 'ant-design-vue';
-  import type { UploadProps, UploadFile } from 'ant-design-vue';
+  import type { UploadFile, UploadProps } from 'ant-design-vue';
+  import { Modal, Upload } from 'ant-design-vue';
   import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
   import { useMessage } from '@/hooks/web/useMessage';
   import { isArray, isFunction, isObject, isString } from '@/utils/is';
@@ -36,6 +36,7 @@
   import { useUploadType } from '../hooks/useUpload';
   import { uploadContainerProps } from '../props';
   import { isImgTypeByName } from '../helper';
+  import { UploadResultStatus } from '@/components/Upload/src/types/typing';
 
   defineOptions({ name: 'ImageUpload' });
 
@@ -46,6 +47,7 @@
   const { t } = useI18n();
   const { createMessage } = useMessage();
   const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+  const isInnerOperate = ref<boolean>(false);
   const { getStringAccept } = useUploadType({
     acceptRef: accept,
     helpTextRef: helpText,
@@ -63,8 +65,18 @@
   watch(
     () => props.value,
     (v) => {
-      if (v && isArray(v)) {
-        fileList.value = v.map((item, i) => {
+      if (isInnerOperate.value) {
+        isInnerOperate.value = false;
+        return;
+      }
+      if (v) {
+        let value: string[] = [];
+        if (isArray(v)) {
+          value = v;
+        } else {
+          value.push(v);
+        }
+        fileList.value = value.map((item, i) => {
           if (item && isString(item)) {
             return {
               uid: -i + '',
@@ -107,7 +119,9 @@
     if (fileList.value) {
       const index = fileList.value.findIndex((item) => item.uid === file.uid);
       index !== -1 && fileList.value.splice(index, 1);
-      emit('change', fileList.value);
+      const value = getValue();
+      isInnerOperate.value = true;
+      emit('change', value);
       emit('delete', file);
     }
   };
@@ -152,12 +166,23 @@
         filename: props.filename,
       });
       info.onSuccess!(res.data);
-      emit('change', fileList.value);
+      const value = getValue();
+      isInnerOperate.value = true;
+      emit('change', value);
     } catch (e: any) {
       console.log(e);
       info.onError!(e);
     }
   }
+
+  function getValue() {
+    const list = (fileList.value || [])
+      .filter((item) => item?.status === UploadResultStatus.DONE)
+      .map((item: any) => {
+        return item?.url || item?.response?.url;
+      });
+    return props.multiple ? list : list.length > 0 ? list[0] : '';
+  }
 </script>
 
 <style lang="less">

diff --git a/src/components/Upload/src/props.ts b/src/components/Upload/src/props.ts
@@ -32,7 +32,7 @@ export const basicProps = {
   // 最大数量的文件，Infinity不限制
   maxNumber: {
     type: Number as PropType<number>,
-    default: Infinity,
+    default: 1,
   },
   // 根据后缀，或者其他
   accept: {
@@ -41,7 +41,7 @@ export const basicProps = {
   },
   multiple: {
     type: Boolean as PropType<boolean>,
-    default: true,
+    default: false,
   },
   uploadParams: {
     type: Object as PropType<any>,

diff --git a/src/components/Upload/src/types/typing.ts b/src/components/Upload/src/types/typing.ts
@@ -2,6 +2,7 @@ import { BasicColumn } from '@/components/Table';
 import { UploadApiResult } from '@/api/sys/model/uploadModel';
 
 export enum UploadResultStatus {
+  DONE = 'done',
   SUCCESS = 'success',
   ERROR = 'error',
   UPLOADING = 'uploading',