refactor: upload component (wip)

apps/web-antd/src/components/upload/src/file-upload.vue

@@ -16,7 +16,7 @@ import { checkFileType } from './helper';
 import { UploadResultStatus } from './typing';
 import { useUploadType } from './use-upload';
 
-defineOptions({ name: 'FileUpload' });
+defineOptions({ name: 'FileUpload', inheritAttrs: false });
 
 const props = withDefaults(
   defineProps<{
@@ -95,7 +95,6 @@ watch(
         return null;
       }) as UploadProps['fileList'];
     }
-    emit('update:value', value);
     if (!isFirstRender.value) {
       emit('change', value);
       isFirstRender.value = false;
@@ -169,6 +168,10 @@ function getValue() {
       if (item?.response && props?.resultField) {
         return item?.response?.[props.resultField];
       }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
       // 注意这里取的key为 url
       return item?.response?.url;
     });

apps/web-antd/src/components/upload/src/image-upload.vue

@@ -16,7 +16,7 @@ import { checkFileType } from './helper';
 import { UploadResultStatus } from './typing';
 import { useUploadType } from './use-upload';
 
-defineOptions({ name: 'ImageUpload' });
+defineOptions({ name: 'ImageUpload', inheritAttrs: false });
 
 const props = withDefaults(
   defineProps<{
@@ -106,7 +106,6 @@ watch(
         return null;
       }) as UploadProps['fileList'];
     }
-    emit('update:value', value);
     if (!isFirstRender.value) {
       emit('change', value);
       isFirstRender.value = false;

apps/web-antd/src/views/演示使用自行删除/upload/index.vue

@@ -10,7 +10,7 @@ import { FileUpload, ImageUpload } from '#/components/upload';
 const resultField = ref<'ossId' | 'url'>('ossId');
 
 const imageList = ref([]);
-const fileList = ref([]);
+const fileList = ref(['111', '2222']);
 const fieldOptions = [
   { label: 'ossId', value: 'ossId' },
   { label: '链接地址', value: 'url' },
@@ -25,13 +25,9 @@ const signleImage = ref<string>('');
     <div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
       <Alert
         :show-icon="true"
-        message="新特性: 单张图片会被绑定为string而非string[]类型 省去手动转换"
+        message="新特性: 设置max-number为1时, 会被绑定为string而非string[]类型 省去手动转换"
       />
       <ImageUpload v-model:value="signleImage" :max-number="1" />
-      <Alert
-        :show-icon="true"
-        message="默认给空字符串会被转为[], 上传之后为正常string类型"
-      />
       <JsonPreview :data="signleImage" />
     </div>
     <div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
@@ -39,7 +35,11 @@ const signleImage = ref<string>('');
         <span>返回字段: </span>
         <RadioGroup v-model:value="resultField" :options="fieldOptions" />
       </div>
-      <ImageUpload v-model:value="imageList" :result-field="resultField" />
+      <ImageUpload
+        v-model:value="imageList"
+        :max-number="3"
+        :result-field="resultField"
+      />
       <JsonPreview :data="imageList" />
     </div>
     <div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
@@ -55,6 +55,7 @@ const signleImage = ref<string>('');
       <FileUpload
         v-model:value="fileList"
         :accept="fileAccept"
+        :max-number="3"
         :result-field="resultField"
       />
       <JsonPreview :data="fileList" />