feat: 图片上传/回显支持绑定string类型

apps/web-antd/src/components/upload/src/helper.ts

@@ -1,5 +1,4 @@
 export function checkFileType(file: File, accepts: string[]) {
-  console.log(file.name, accepts);
   let reg;
   if (!accepts || accepts.length === 0) {
     reg = /.(?:jpg|jpeg|png|gif|webp)$/i;

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

@@ -40,7 +40,7 @@ const props = withDefaults(
     // support xxx.xxx.xx
     // 返回的字段 默认url
     resultField?: 'fileName' | 'ossId' | 'url' | string;
-    value?: string[];
+    value?: string | string[];
   }>(),
   {
     value: () => [],
@@ -81,14 +81,18 @@ watch(
       isInnerOperate.value = false;
       return;
     }
-    let value: string[] = [];
+    let value: string | string[] = [];
     if (v) {
-      if (isArray(v)) {
+      const _fileList: string[] = [];
-        value = v;
+      if (isString(v)) {
-      } else {
+        _fileList.push(v);
-        value.push(v);
       }
-      fileList.value = value.map((item, i) => {
+      if (isArray(v)) {
+        _fileList.push(...v);
+      }
+      // 直接赋值 可能为string | string[]
+      value = v;
+      fileList.value = _fileList.map((item, i) => {
         if (item && isString(item)) {
           return {
             uid: `${-i}`,
@@ -205,9 +209,21 @@ 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;
     });
+  // 只有一张图片 默认绑定string而非string[]
+  if (props.maxNumber === 1 && list.length === 1) {
+    return list[0];
+  }
+  // 只有一张图片 && 删除图片时 可自行修改
+  if (props.maxNumber === 1 && list.length === 0) {
+    return '';
+  }
   return list;
 }
 </script>

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

@@ -16,10 +16,24 @@ const fieldOptions = [
   { label: '链接地址', value: 'url' },
 ];
 const fileAccept = ['txt', 'excel', 'word', 'pdf'];
+
+const signleImage = ref<string>('');
 </script>
 
 <template>
   <Page content-class="flex flex-col gap-[12px]">
+    <div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
+      <Alert
+        :show-icon="true"
+        message="新特性: 单张图片会被绑定为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">
       <div class="flex gap-[8px]">
         <span>返回字段: </span>