From c65de0cf77cbbc30282215788c7197593ab1acb2 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 20 Nov 2025 11:17:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(upload):=20=E5=A2=9E=E5=8A=A0=E5=AD=90?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=B8=E5=85=B3=E4=BA=8B=E4=BB=B6itemRemove?=
 =?UTF-8?q?=E3=80=81itemRetry=E3=80=81itemReplace=E3=80=81itemPreview?=
 =?UTF-8?q?=E3=80=81itemClick=EF=BC=9B=E5=A2=9E=E5=8A=A0=E6=9A=B4=E9=9C=B2?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3=EF=BC=9AreplaceById=E3=80=81replace?=
 =?UTF-8?q?ByIndex=E3=80=81removeById=E3=80=81previewItemByIndex=E3=80=81p?=
 =?UTF-8?q?reviewItemById?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |   2 +-
 packages/opendesign/src/upload/OUpload.vue    | 139 ++++++++++++++--
 packages/opendesign/src/upload/UploadItem.vue |  77 ++++++---
 .../src/upload/__demo__/TheIndex.vue          |   2 +
 .../src/upload/__demo__/UploadEvent.vue       | 155 ++++++++++++++++++
 .../opendesign/src/upload/__demo__/upload.ts  |   6 +-
 .../opendesign/src/upload/style/style.scss    |  54 +-----
 packages/opendesign/src/upload/style/var.scss |   1 +
 packages/opendesign/src/upload/types.ts       |   2 +-
 9 files changed, 346 insertions(+), 92 deletions(-)
 create mode 100644 packages/opendesign/src/upload/__demo__/UploadEvent.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index a4933a5e..fd5a5c77 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -31,7 +31,7 @@ module.exports = {
     'object-curly-spacing': ['warn', 'always'],
     'rest-spread-spacing': 'warn',
     'switch-colon-spacing': 'error',
-    'func-call-spacing': 'warn',
+    'func-call-spacing': 'off',
     'semi-spacing': 'warn',
     'template-curly-spacing': 'warn',
     'template-tag-spacing': 'warn',
diff --git a/packages/opendesign/src/upload/OUpload.vue b/packages/opendesign/src/upload/OUpload.vue
index c8aca06a..f18c9861 100644
--- a/packages/opendesign/src/upload/OUpload.vue
+++ b/packages/opendesign/src/upload/OUpload.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { uploadProps, UploadFileT } from './types';
-import { computed, ref, inject, watch } from 'vue';
+import { computed, ref, inject, watch, useTemplateRef } from 'vue';
 import { isArray, isFunction } from '../_utils/is';
 import { filterSlots } from '../_utils/vue-utils';
 import UploadItem from './UploadItem.vue';
@@ -20,6 +20,11 @@ const emits = defineEmits<{
   (e: 'change', value: UploadFileT[]): void;
   (e: 'select', value: UploadFileT[]): void;
   (e: 'update:modelValue', value: UploadFileT[]): void;
+  (e: 'itemRemove', value: UploadFileT, evt: Event): void;
+  (e: 'itemRetry', value: UploadFileT, evt: Event): void;
+  (e: 'itemReplace', value: UploadFileT, evt: Event): void;
+  (e: 'itemPreview', value: UploadFileT, evt: Event): void;
+  (e: 'itemClick', value: UploadFileT, evt: Event): void;
 }>();
 
 const emitUpdateValue = (value: UploadFileT[]) => {
@@ -69,7 +74,7 @@ const uploadOption = computed(() => {
 });
 
 const selectRef = ref<InstanceType<typeof InputSelect> | null>(null);
-let replaceId = '';
+let replaceId:string | number = '';
 
 /**
  * 上传所有文件
@@ -155,7 +160,7 @@ const onFileSelected = async (files: FileList) => {
 /**
  * 删除文件
  */
-const removeFile = async (file: UploadFileT) => {
+const doRemoveFile = async (file: UploadFileT) => {
   if (isFunction(props.onBeforeRemove)) {
     const sure = await props.onBeforeRemove(file);
     if (sure === false) {
@@ -163,7 +168,9 @@ const removeFile = async (file: UploadFileT) => {
     }
   }
   file.request?.abort();
-  fileList.value = fileList.value.filter((f) => f.id !== file.id);
+
+  const index = fileList.value.findIndex(item => item.id === file.id);
+  fileList.value.splice(index, 1);
 
   formItemInjection?.fieldHandlers.onChange?.();
 
@@ -171,40 +178,110 @@ const removeFile = async (file: UploadFileT) => {
 
   return true;
 };
+
 const removeFileByIndex = (index: number) => {
-  if (index > -1 && index < fileList.value.length) {
-    return removeFile(fileList.value[index]);
+  if (index < 0 && index >= fileList.value.length) {
+    return;
   }
+  doRemoveFile(fileList.value[index]);
+};
+const removeById = (id: string|number) => {
+  const index = fileList.value.findIndex(item => item.id === id);
+  removeFileByIndex(index);
 };
+
 const removeAllFiles = () => {
   return new Promise((resolve) => {
-    Promise.allSettled(fileList.value.map((f) => removeFile(f))).then((res) => {
+    Promise.allSettled(fileList.value.map((f) => doRemoveFile(f))).then((res) => {
       resolve(res);
+
+      fileList.value = [];
+
+      emitUpdateValue(fileList.value);
+
+      emits('change', fileList.value);
+
     });
-    fileList.value = [];
+  });
+};
 
-    emitUpdateValue(fileList.value);
+// 处理点击删除图标
+const onRemoveFile = (file: UploadFileT, e: Event) => {
+  doRemoveFile(file).then(() => {
+    emits('itemRemove', file, e);
+
+    emits('change', fileList.value);
   });
 };
 /**
  * 重新上传文件
  */
-const onFileUploadRetry = (file: UploadFileT) => {
-  if (!file.retry || !file.file) {
+const doRetryUpload = (file: UploadFileT, force?: boolean) => {
+  if (!file.file) {
+    console.warn('retry file not found!');
+    return;
+  }
+
+  if (!file.retry && !force) {
     return;
   }
+
   doUploadFile(file, uploadOption.value);
+
+  formItemInjection?.fieldHandlers.onChange?.();
 };
 
 /**
- * 替换文件上传
+ * 重新选择新的文件替换文件
  */
-const onFileReplace = (file: UploadFileT) => {
-  selectRef.value?.select(false);
+const onFileUploadRetry = (file: UploadFileT, e: Event) => {
+  doRetryUpload(file);
+  emits('itemRetry', file, e);
+};
 
+/**
+ * 重新选择新的文件替换文件
+ */
+const doReplaceFile = (file: UploadFileT) => {
   replaceId = file.id;
+  selectRef.value?.select(false);
+};
+
+const replaceByIndex = (index: number, newFile: UploadFileT) => {
+  const file = fileList.value[index];
+  if (!file) {
+    console.warn('file not found!');
+  }
+  file.request?.abort();
+
+  if (newFile) {
+    fileList.value.splice(index, 1, newFile);
+
+    emits('change', fileList.value);
+
+    formItemInjection?.fieldHandlers.onChange?.();
+
+  } else {
+    doReplaceFile(file);
+  }
+};
+
+const replaceById = (id: string, newFile: UploadFileT) => {
+  const index = fileList.value.findIndex(item => item.id === id);
+
+  replaceByIndex(index, newFile);
 };
 
+/**
+ * 替换文件上传
+ */
+const onFileReplace = (file: UploadFileT, e: Event) => {
+  doReplaceFile(file);
+
+  emits('itemReplace', file, e);
+
+  formItemInjection?.fieldHandlers.onChange?.();
+};
 /**
  * 选择文件
  */
@@ -219,13 +296,38 @@ const doSelect = async () => {
   selectRef.value?.select(props.multiple);
 };
 
+const onUploadItemLabelClick = (file: UploadFileT, e: Event) => {
+  emits('itemClick', file, e);
+};
+
+const onFilePreview = (file: UploadFileT, e: Event) => {
+  emits('itemPreview', file, e);
+};
+
+const uploadItems = useTemplateRef<InstanceType<typeof UploadItem>[]>('uploadItems');
+const previewItemByIndex = (index:number) => {
+  const item = uploadItems.value?.[index];
+
+  item?.preview();
+};
+const previewItemById = (id:number|string) => {
+  const idx = fileList.value.findIndex(item => item.id === id);
+  previewItemByIndex(idx);
+};
+
+
 defineExpose({
   upload: uploadAll,
   select: doSelect,
-  retry: onFileUploadRetry,
-  replace: onFileReplace,
+  retry: doRetryUpload,
+  replace: doReplaceFile,
+  replaceById: replaceById,
+  replaceByIndex: replaceByIndex,
+  removeById: removeById,
   removeByIndex: removeFileByIndex,
   removeAll: removeAllFiles,
+  previewItemByIndex,
+  previewItemById
 });
 </script>
 <template>
@@ -258,12 +360,15 @@ defineExpose({
     >
       <UploadItem
         v-for="item in fileList"
+        ref="uploadItems"
         :key="item.id"
         :file="item"
         :list-type="props.listType"
-        @remove="removeFile"
+        @remove="onRemoveFile"
         @retry="onFileUploadRetry"
         @replace="onFileReplace"
+        @preview="onFilePreview"
+        @itemClick="onUploadItemLabelClick"
       >
         <template v-for="name in filterSlots($slots, slot.names)" #[name]="slotData">
           <slot :name="name" v-bind="slotData"></slot>
diff --git a/packages/opendesign/src/upload/UploadItem.vue b/packages/opendesign/src/upload/UploadItem.vue
index d3c1988e..257d4adf 100644
--- a/packages/opendesign/src/upload/UploadItem.vue
+++ b/packages/opendesign/src/upload/UploadItem.vue
@@ -3,7 +3,7 @@ import { IconLoading, IconLinkPrefix, IconRefresh, IconDelete, IconPreview, Icon
 import { UploadFileT, UploadListTypeT } from './types';
 import { OIcon } from '../icon';
 import { OFigure } from '../figure';
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import slots from './slot';
 import { useI18n } from '../locale';
 
@@ -15,40 +15,58 @@ interface UploadFileItemPropsT {
 const props = defineProps<UploadFileItemPropsT>();
 
 const emits = defineEmits<{
-  (e: 'replace', file: UploadFileT): void;
-  (e: 'remove', file: UploadFileT): void;
-  (e: 'retry', file: UploadFileT): void;
+  (e: 'replace', file: UploadFileT, evt: Event): void;
+  (e: 'remove', file: UploadFileT, evt: Event): void;
+  (e: 'retry', file: UploadFileT, evt: Event): void;
+  (e: 'preview', file: UploadFileT, evt: Event): void;
+  (e: 'itemClick', file: UploadFileT, evt: Event ): void;
 }>();
 
 const { t } = useI18n();
 
-const onFileRemove = (file: UploadFileT) => {
-  emits('remove', file);
+const onFileRemove = (e: Event) => {
+  e.stopPropagation();
+  emits('remove', props.file, e);
 };
 
-const onFileUploadRetry = (file: UploadFileT) => {
-  emits('retry', file);
+const onFileUploadRetry = (e: Event) => {
+  e.stopPropagation();
+  emits('retry', props.file, e);
 };
 
-const showLoading = (file: UploadFileT): boolean => {
-  if (file.status !== 'uploading') {
+const showLoading = (): boolean => {
+  if (props.file.status !== 'uploading') {
     return false;
   }
 
-  if (!file.percent && file.percent !== 0) {
+  if (!props.file.percent && props.file.percent !== 0) {
     return true;
   }
   return false;
 };
 
-const onFileReplace = (file: UploadFileT) => {
-  emits('replace', file);
+const onFileReplace = (e: Event) => {
+  e.stopPropagation();
+  emits('replace', props.file, e);
 };
 
-const figureRef = ref<InstanceType<typeof OFigure> | null>(null);
-const onPreview = () => {
+const figureRef = useTemplateRef<InstanceType<typeof OFigure>>('figureRef');
+const figurePreview = () => {
   figureRef.value?.preview();
 };
+const onPreview = (e: Event ) => {
+  e.stopPropagation();
+  figurePreview();
+  emits('preview', props.file, e);
+};
+
+const onItemClick = (e: Event) => {
+  emits('itemClick', props.file, e );
+};
+
+defineExpose({
+  preview: figurePreview,
+});
 </script>
 <template>
   <div
@@ -64,6 +82,7 @@ const onPreview = () => {
         :class="{
           'is-error': props.file.status === 'failed',
         }"
+         @click="onItemClick"
       >
         <div class="o-upload-card-item-wrap">
           <div class="o-upload-card-file">
@@ -73,7 +92,7 @@ const onPreview = () => {
           <div
             class="o-upload-card-icons"
             :class="{
-              'is-show': showLoading(props.file),
+              'is-show': showLoading(),
             }"
           >
             <OIcon
@@ -81,7 +100,7 @@ const onPreview = () => {
               button
               class="o-upload-icon-btn o-upload-icon-retry"
               :icon="IconRefresh"
-              @click="onFileUploadRetry(props.file)"
+              @click="onFileUploadRetry"
               :title="t('upload.retry')"
             />
             <OIcon
@@ -92,7 +111,7 @@ const onPreview = () => {
               @click="onPreview"
               :title="t('upload.preview')"
             />
-            <OIcon v-if="showLoading(props.file)" class="o-upload-icon-loading">
+            <OIcon v-if="showLoading()" class="o-upload-icon-loading">
               <IconLoading class="o-rotating" />
             </OIcon>
             <OIcon
@@ -100,12 +119,11 @@ const onPreview = () => {
               :icon="IconEdit"
               v-if="props.file.status === 'finished'"
               class="o-upload-icon-btn o-upload-icon-edit"
-              @click="onFileReplace(props.file)"
+              @click="onFileReplace"
               :title="t('upload.edit')"
             />
-            <OIcon button class="o-upload-icon-btn o-upload-icon-remove" :icon="IconDelete" @click="onFileRemove(props.file)" :title="t('upload.delete')" />
+            <OIcon button class="o-upload-icon-btn o-upload-icon-remove" :icon="IconDelete" @click="onFileRemove" :title="t('upload.delete')" />
           </div>
-
           <div v-if="props.file.status === 'uploading' && props.file.percent" class="o-upload-progress o-upload-card-progress">
             <div class="o-upload-progress-bar" :style="{ width: props.file.percent + '%' }"></div>
           </div>
@@ -117,14 +135,23 @@ const onPreview = () => {
         :class="{
           'is-error': props.file.status === 'failed',
         }"
+         @click="onItemClick"
       >
-        <div v-if="props.file.icon !== false" class="o-upload-icon-link">
+        <OFigure
+          v-if="props.listType === 'picture' && props.file.imgUrl"
+          ref="figureRef"
+          preview
+          class="o-upload-thumbnail"
+          :src="props.file.imgUrl"
+          @click.stop
+        />
+        <div v-else-if="props.file.icon !== false" class="o-upload-icon-link">
           <component :is="props.file.icon" v-if="props.file.icon" />
           <IconLinkPrefix v-else />
         </div>
         <div class="o-upload-row-label">{{ props.file.name }}</div>
         <div class="o-upload-row-icons">
-          <OIcon v-if="showLoading(props.file)" class="o-upload-icon-loading">
+          <OIcon v-if="showLoading()" class="o-upload-icon-loading">
             <IconLoading class="o-rotating" />
           </OIcon>
           <OIcon
@@ -132,14 +159,14 @@ const onPreview = () => {
             button
             class="o-upload-row-icon o-upload-icon-hover-in o-upload-icon-retry"
             :icon="IconRefresh"
-            @click="onFileUploadRetry(props.file)"
+            @click="onFileUploadRetry"
             :title="t('upload.retry')"
           />
           <OIcon
             button
             class="o-upload-row-icon o-upload-icon-remove o-upload-icon-hover-in"
             :icon="IconDelete"
-            @click="onFileRemove(props.file)"
+            @click="onFileRemove"
             :title="t('upload.delete')"
           />
         </div>
diff --git a/packages/opendesign/src/upload/__demo__/TheIndex.vue b/packages/opendesign/src/upload/__demo__/TheIndex.vue
index 1a1271a0..516c48c4 100644
--- a/packages/opendesign/src/upload/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/upload/__demo__/TheIndex.vue
@@ -3,11 +3,13 @@ import '../style';
 
 import UploadBasic from './UploadBasic.vue';
 import UploadSlots from './UploadSlots.vue';
+import UploadEvent from './UploadEvent.vue';
 </script>
 <template>
   <div class="page-demo">
     <UploadBasic />
     <UploadSlots />
+    <UploadEvent/>
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/upload/__demo__/UploadEvent.vue b/packages/opendesign/src/upload/__demo__/UploadEvent.vue
new file mode 100644
index 00000000..982b105b
--- /dev/null
+++ b/packages/opendesign/src/upload/__demo__/UploadEvent.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { OUpload, UploadFileT } from '../index';
+import { onAfterSelect, uploadRequest, onBeforeUpload } from './upload';
+
+const imgs = [
+  '//soft.uesou.cn/statics/images/landpage122/type1/8.jpg',
+  '//soft.uesou.cn/statics/images/landpage122/type1/3.jpg',
+  '//soft.uesou.cn/statics/images/landpage122/type1/2.jpg',
+];
+
+const fileList = ref<UploadFileT[]>([
+  {
+    id: '1',
+    name: 'test.png',
+    status: 'finished',
+    imgUrl: imgs[0],
+  },
+  {
+    id: '2',
+    name: 'test2.png',
+    status: 'failed',
+    message: '上传失败',
+  }, {
+    id: '3',
+    name: 'test3.png',
+    status: 'finished',
+    imgUrl: imgs[2],
+  },
+]);
+const uploadRef = useTemplateRef('uploadRef');
+
+const onProgress = (f: UploadFileT) => {
+  console.log(f.name, f.percent);
+};
+const onSuccess = (v: UploadFileT) => {
+  console.log('onSuccess', v);
+};
+const onError = (v: UploadFileT) => {
+  console.log('onError', v);
+};
+const onItemRemove = (v: UploadFileT) => {
+  console.log('onItemRemove', v );
+};
+const onItemClick = (v: UploadFileT, evt:Event) => {
+  console.log('onItemClick', evt, v );
+  uploadRef.value?.previewItemById(v.id);
+};
+const onItemRetry = (v: UploadFileT) => {
+  console.log('onItemRetry', v );
+};
+const onItemReplace = (v: UploadFileT) => {
+  console.log('onItemReplace', v );
+};
+const onItemPreview = (v: UploadFileT) => {
+  console.log('onItemPreview', v );
+};
+
+const onChange = (f: UploadFileT[]) => {
+  const r = f.map((item) => `${item.name}:${item.status}`);
+  console.log(r.join(', '));
+  console.log('onChange', fileList.value);
+};
+const onSelect = (f: UploadFileT[]) => {
+  const r = f.map((item) => `${item.name}:${item.status}`);
+  console.log(r.join(', '));
+  console.log('onSelect', fileList.value);
+};
+
+
+</script>
+<template>
+  <h4>Event</h4>
+  <p>上传成功率85%  上传时间：10秒</p>
+  <section style="flex-wrap: wrap; align-items: flex-start">
+    <div class="upload-item">
+      <OUpload
+        multiple
+        btn-label="上传(多选)"
+        accept=".jpg,.png,.svg"
+        v-model="fileList"
+        :on-after-select="onAfterSelect"
+        :upload-request="uploadRequest"
+        :on-before-upload="onBeforeUpload"
+        @select="onSelect"
+        @change="onChange"
+        @progress="onProgress"
+        @success="onSuccess"
+        @error="onError"
+        @item-remove="onItemRemove"
+        @item-retry="onItemRetry"
+        @item-replace="onItemReplace"
+        @item-click="onItemClick"
+      />
+    </div>
+    <div class="upload-item">
+      <OUpload
+        multiple
+        btn-label="上传(多选)"
+        accept=".jpg,.png,.svg"
+        v-model="fileList"
+        list-type="picture"
+        :on-after-select="onAfterSelect"
+        :upload-request="uploadRequest"
+        :on-before-upload="onBeforeUpload"
+        ref="uploadRef"
+        @select="onSelect"
+        @change="onChange"
+        @progress="onProgress"
+        @success="onSuccess"
+        @error="onError"
+        @item-remove="onItemRemove"
+        @item-retry="onItemRetry"
+        @item-replace="onItemReplace"
+        @item-click="onItemClick"
+      />
+    </div>
+    <div class="upload-item">
+      <OUpload
+        multiple
+        btn-label="上传(多选)"
+        accept=".jpg,.png,.svg"
+        v-model="fileList"
+        list-type="picture-card"
+        :on-after-select="onAfterSelect"
+        :upload-request="uploadRequest"
+        :on-before-upload="onBeforeUpload"
+        @select="onSelect"
+        @change="onChange"
+        @progress="onProgress"
+        @success="onSuccess"
+        @error="onError"
+        @item-remove="onItemRemove"
+        @item-retry="onItemRetry"
+        @item-replace="onItemReplace"
+        @item-preview="onItemPreview"
+        @item-click="onItemClick"
+      />
+    </div>
+  </section>
+</template>
+<style lang="scss" scoped>
+p {
+  font-size: 14px;
+  margin: 16px 0 12px;
+  color: var(--o-color-info2);
+}
+.upload-item {
+  width: calc(50% - 16px);
+  flex-shrink: 0;
+}
+.btn {
+  margin-bottom: 8px;
+}
+</style>
diff --git a/packages/opendesign/src/upload/__demo__/upload.ts b/packages/opendesign/src/upload/__demo__/upload.ts
index 1ae8edbd..ca5f805b 100644
--- a/packages/opendesign/src/upload/__demo__/upload.ts
+++ b/packages/opendesign/src/upload/__demo__/upload.ts
@@ -25,16 +25,18 @@ export const onAfterSelect = (fileList: FileList): Promise<UploadFileT[]> => {
   );
 };
 
+const SUCCESS_RATE = 0.9;
+const UPLOAD_SPEED = 0.05;
 export const mockUpload = (file?: File, onFinished?: (success: boolean) => void, onProgress?: (p: number) => void) => {
   if (!file) {
     return;
   }
   let c = 0;
   const size = file.size;
-  const speed = Math.floor(size * 0.01);
+  const speed = Math.floor(size * UPLOAD_SPEED);
   const timer = setInterval(() => {
     const r = Math.random();
-    if (r > 0.999) {
+    if (r > SUCCESS_RATE) {
       console.log(r);
 
       clearInterval(timer);
diff --git a/packages/opendesign/src/upload/style/style.scss b/packages/opendesign/src/upload/style/style.scss
index 2abf46c9..de3cc779 100644
--- a/packages/opendesign/src/upload/style/style.scss
+++ b/packages/opendesign/src/upload/style/style.scss
@@ -35,6 +35,7 @@
 
 .o-upload-row-item {
   display: flex;
+  align-items: center;
   margin-top: 8px;
   padding: 0 4px;
   border-radius: var(--upload-item-radius);
@@ -47,6 +48,7 @@
     }
   }
   &.is-error {
+    background-color: var(--upload-item-bg-hover);
     .o-upload-icon-hover-in {
       opacity: 1;
     }
@@ -54,6 +56,12 @@
   + .o-upload-item-tip {
     padding-left: 24px;
   }
+
+  .o-upload-thumbnail {
+    width: var(--upload-item-picture-size);
+    height: var(--upload-item-picture-size);
+    margin-right: 8px;
+  }
 }
 
 .o-upload-row-label {
@@ -327,49 +335,3 @@
     border: var(--upload-card-border-error);
   }
 }
-.o-upload-thumbnail {
-  width: 100%;
-  height: 100%;
-  object-fit: var(--upload-card-img-fit);
-  border-radius: inherit;
-}
-.o-upload-icon-file {
-  font-size: var(--upload-icon-size-xl);
-}
-.o-upload-card-icons {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--o-color-info1-inverse);
-  font-size: var(--upload-icon-size-l);
-
-  background-color: var(--upload-card-mask);
-
-  opacity: 0;
-  transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
-
-  &:hover,
-  &.is-show {
-    opacity: 1;
-  }
-
-  > * + * {
-    margin-left: 12px;
-  }
-
-  > .o-upload-icon-btn {
-    cursor: pointer;
-    &:hover {
-      color: var(--upload-card-icon-color-hover);
-    }
-    &:active {
-      color: var(--upload-card-icon-color-active);
-    }
-  }
-}
diff --git a/packages/opendesign/src/upload/style/var.scss b/packages/opendesign/src/upload/style/var.scss
index fa295694..aa3f296a 100644
--- a/packages/opendesign/src/upload/style/var.scss
+++ b/packages/opendesign/src/upload/style/var.scss
@@ -9,6 +9,7 @@
 
   --upload-item-bg-hover: var(--o-color-control2-light);
   --upload-item-radius: var(--o-radius_control-s);
+  --upload-item-picture-size: var(--o-icon_size-2xl);
 
   --upload-progress-height: 1px;
   --upload-progress-radius: var(--upload-progress-height);
diff --git a/packages/opendesign/src/upload/types.ts b/packages/opendesign/src/upload/types.ts
index 73a10801..e2dd0582 100644
--- a/packages/opendesign/src/upload/types.ts
+++ b/packages/opendesign/src/upload/types.ts
@@ -7,7 +7,7 @@ export const UploadFileStatusTypes = ['pending', 'uploading', 'finished', 'faile
 export type UploadFileStatusT = (typeof UploadFileStatusTypes)[number];
 
 export interface UploadFileT {
-  id: string;
+  id: string | number;
   name: string;
   file?: File; // 上传文件
   status?: UploadFileStatusT; // 校验/上传结果
-- 
Gitee