diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
index 53c430def..b9439b499 100644
--- a/packages/components/config/src/defaultConfig.ts
+++ b/packages/components/config/src/defaultConfig.ts
@@ -212,7 +212,7 @@ const upload: UploadConfig = {
 }
 
 const uploadList: UploadListConfig = {
-  listType: 'text',
+  type: 'text',
   icon: {
     file: 'paper-clip',
     remove: 'delete',
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index a38e9bf89..0ec936bec 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -200,7 +200,7 @@ export interface UploadConfig {
 }
 
 export interface UploadListConfig {
-  listType: UploadListType
+  type: UploadListType
   icon: Partial<Record<UploadIconType, string | VNode>>
 }
 
diff --git a/packages/components/upload/__tests__/__snapshots__/upload.spec.ts.snap b/packages/components/upload/__tests__/__snapshots__/upload.spec.ts.snap
index 81b5e1a46..c16f4e513 100644
--- a/packages/components/upload/__tests__/__snapshots__/upload.spec.ts.snap
+++ b/packages/components/upload/__tests__/__snapshots__/upload.spec.ts.snap
@@ -1,11 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Upload render render work 1`] = `
-"<div>
+"<div class=\\"ix-upload\\">
   <div class=\\"ix-upload-selector\\"><input class=\\"ix-upload-input\\" type=\\"file\\">
     <!---->
   </div>
   <!---->
+  <!---->
   <div class=\\"ix-upload-tip\\">
     <!---->
   </div>
diff --git a/packages/components/upload/__tests__/list.spec.ts b/packages/components/upload/__tests__/list.spec.ts
index a00bc048e..c2371511c 100644
--- a/packages/components/upload/__tests__/list.spec.ts
+++ b/packages/components/upload/__tests__/list.spec.ts
@@ -43,7 +43,7 @@ describe('Upload list render', () => {
           [uploadToken as symbol]: {
             files: ref([
               {
-                uid: 'test1',
+                key: 'test1',
                 name: 'idux.svg',
                 thumbUrl: '/icons/logo.svg',
               },
@@ -72,7 +72,7 @@ describe('Upload list render', () => {
           [uploadToken as symbol]: {
             files: ref([
               {
-                uid: 'test1',
+                key: 'test1',
                 name: 'idux.svg',
                 errorTip: 'error',
                 status: 'error',
@@ -94,7 +94,7 @@ describe('Upload list render', () => {
           [uploadToken as symbol]: {
             files: ref([
               {
-                uid: 'test1',
+                key: 'test1',
                 name: 'idux.svg',
                 status: 'success',
               },
@@ -121,7 +121,7 @@ describe('Upload list render', () => {
     const onDownload = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.svg',
         status: 'success',
       },
@@ -152,7 +152,7 @@ describe('Upload list render', () => {
     const onPreview = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.svg',
         status: 'success',
       },
@@ -189,7 +189,7 @@ describe('Upload list render', () => {
     const upload = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.svg',
         status: 'error',
       },
@@ -223,10 +223,10 @@ describe('Upload list render', () => {
     const abort = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.png',
         status: 'uploading',
-        raw: Object.assign(new File(['test1'], 'idux.png', { type: 'image/png' }), { uid: 'test1' }),
+        raw: new File(['test1'], 'idux.png', { type: 'image/png' }),
       },
     ]
 
diff --git a/packages/components/upload/__tests__/upload.spec.ts b/packages/components/upload/__tests__/upload.spec.ts
index eaa47f0ba..6c123cced 100644
--- a/packages/components/upload/__tests__/upload.spec.ts
+++ b/packages/components/upload/__tests__/upload.spec.ts
@@ -16,12 +16,12 @@ import { UploadProps } from '../src/types'
 
 const defaultFiles: UploadFile[] = [
   {
-    uid: 'test1',
+    key: 'test1',
     name: 'idux.svg',
     thumbUrl: '/icons/logo.svg',
   },
   {
-    uid: 'error',
+    key: 'error',
     name: 'error.png',
     status: 'error',
     errorTip: 'Upload failed.',
@@ -105,7 +105,7 @@ describe('Upload render', () => {
 
     expect(wrapper.findAll('.ix-upload-file').length).toBe(2)
 
-    await wrapper.setProps({ files: [{ uid: 'files test', name: 'files test' }] })
+    await wrapper.setProps({ files: [{ key: 'files test', name: 'files test' }] })
 
     expect(wrapper.findAll('.ix-upload-file').length).toBe(1)
 
@@ -210,7 +210,7 @@ describe('Upload render', () => {
       props: {
         files: [
           {
-            uid: 'test2',
+            key: 'test2',
             name: 'idux.svg',
             status: 'uploading',
             percent: 50,
diff --git a/packages/components/upload/demo/Action.vue b/packages/components/upload/demo/Action.vue
index b5c1b2b98..ec3a57e5c 100644
--- a/packages/components/upload/demo/Action.vue
+++ b/packages/components/upload/demo/Action.vue
@@ -15,8 +15,8 @@ import { ref } from 'vue'
 const files = ref([])
 const action = (file: UploadFile) => {
   if (file.raw?.type === 'image/png') {
-    return Promise.resolve('/upload/png')
+    return Promise.resolve('https://run.mocky.io/v3/41a4b385-bf7e-4808-b1e4-d2ef1e0cdc11')
   }
-  return '/upload'
+  return 'https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354'
 }
 </script>
diff --git a/packages/components/upload/demo/Basic.vue b/packages/components/upload/demo/Basic.vue
index 0617ebf04..40f9171d4 100644
--- a/packages/components/upload/demo/Basic.vue
+++ b/packages/components/upload/demo/Basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
diff --git a/packages/components/upload/demo/ButtonDisplay.vue b/packages/components/upload/demo/ButtonDisplay.vue
index 019bfb916..d7e8ad57d 100644
--- a/packages/components/upload/demo/ButtonDisplay.vue
+++ b/packages/components/upload/demo/ButtonDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <a>Click here</a>
     <template #list>
       <IxUploadList type="text" />
diff --git a/packages/components/upload/demo/Check.vue b/packages/components/upload/demo/Check.vue
index 0bc6f34a5..018e61e9e 100644
--- a/packages/components/upload/demo/Check.vue
+++ b/packages/components/upload/demo/Check.vue
@@ -1,5 +1,11 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" accept=".png" @select="onSelect" @beforeUpload="onBeforeUpload">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    accept=".png"
+    @select="onSelect"
+    @beforeUpload="onBeforeUpload"
+  >
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
@@ -8,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile, UploadRawFile } from '@idux/components/upload'
+import type { UploadFile } from '@idux/components/upload'
 
 import { ref } from 'vue'
 
@@ -28,7 +34,7 @@ const onBeforeUpload = (file: UploadFile) =>
     resolve(true)
   })
 
-const onSelect = (files: UploadRawFile[]) => {
+const onSelect = (files: File[]) => {
   if (files.some(file => file.name.length > 6)) {
     warning('Check from onSelect: The file size exceeds the limitFile name exceeds length.')
     return false
diff --git a/packages/components/upload/demo/CustomFileList.vue b/packages/components/upload/demo/CustomFileList.vue
index 35c5f6a94..175085b02 100644
--- a/packages/components/upload/demo/CustomFileList.vue
+++ b/packages/components/upload/demo/CustomFileList.vue
@@ -1,8 +1,8 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list="{ abort, upload }">
-      <div v-for="file in files" :key="file.uid" class="upload-file">
+      <div v-for="file in files" :key="file.key" class="upload-file">
         <a :class="`file file-${file.status}`" href="file.thumbUrl">{{ file.name }}</a>
         <div>
           <span>{{ file.percent.toFixed(2) }}% </span>
diff --git a/packages/components/upload/demo/CustomRequest.vue b/packages/components/upload/demo/CustomRequest.vue
index 8e8ba92eb..c558f4e4b 100644
--- a/packages/components/upload/demo/CustomRequest.vue
+++ b/packages/components/upload/demo/CustomRequest.vue
@@ -1,5 +1,10 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" :customRequest="customRequest" @requestChange="onRequestChange">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    :customRequest="customRequest"
+    @requestChange="onRequestChange"
+  >
     <IxButton>Custom upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
@@ -13,7 +18,8 @@ import type { UploadRequestChangeOption, UploadRequestOption } from '@idux/compo
 import { ref } from 'vue'
 
 const files = ref([])
-const customRequest = (option: UploadRequestOption<Response>) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const customRequest = (option: UploadRequestOption<any>) => {
   const formData = new FormData()
   const controller = new AbortController()
   const signal = controller.signal
@@ -32,7 +38,7 @@ const customRequest = (option: UploadRequestOption<Response>) => {
     })
   }
 
-  formData.append(option.filename, option.file, option.file.name)
+  formData.append(option.name, option.file, option.file.name)
 
   fetch(option.action, {
     method: option.requestMethod,
diff --git a/packages/components/upload/demo/Dragable.vue b/packages/components/upload/demo/Dragable.vue
index f66e0a8c4..51415300b 100644
--- a/packages/components/upload/demo/Dragable.vue
+++ b/packages/components/upload/demo/Dragable.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" dragable>
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354" dragable>
     <div class="drag-panel">
       <IxIcon name="upload" class="drag-panel-icon"></IxIcon>
       <p>Drag and drop files or click to select files to upload.</p>
diff --git a/packages/components/upload/demo/FilesList.vue b/packages/components/upload/demo/FilesList.vue
index aa5205cfd..7c9795968 100644
--- a/packages/components/upload/demo/FilesList.vue
+++ b/packages/components/upload/demo/FilesList.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList />
@@ -12,12 +12,12 @@ import { ref } from 'vue'
 
 const files = ref([
   {
-    uid: 'test1',
+    key: 'test1',
     name: 'idux.svg',
     thumbUrl: '/icons/logo.svg',
   },
   {
-    uid: 'error',
+    key: 'error',
     name: 'error.png',
     status: 'error',
     errorTip: 'Upload failed.',
diff --git a/packages/components/upload/demo/Hooks.vue b/packages/components/upload/demo/Hooks.vue
index e0d958534..c5130a134 100644
--- a/packages/components/upload/demo/Hooks.vue
+++ b/packages/components/upload/demo/Hooks.vue
@@ -1,7 +1,7 @@
 <template>
   <IxUpload
     v-model:files="files"
-    action="/upload"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
     :maxCount="1"
     @beforeUpload="onBeforeUploadMessage"
     @select="onSelectMessage"
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile, UploadRawFile, UploadRequestChangeOption } from '@idux/components/upload'
+import type { UploadFile, UploadRequestChangeOption } from '@idux/components/upload'
 import type { Ref } from 'vue'
 
 import { ref, watch } from 'vue'
@@ -34,7 +34,7 @@ const onBeforeUploadMessage = (file: UploadFile) => {
   timelineList.value.push(`${file.name}: beforeUpload`)
   return true
 }
-const onSelectMessage = (file: UploadRawFile[]) => {
+const onSelectMessage = (file: File[]) => {
   console.log('select', file)
   timelineList.value.push(`${file[0].name}: select`)
   return true
diff --git a/packages/components/upload/demo/Icon.vue b/packages/components/upload/demo/Icon.vue
index c526d17c9..163a409d2 100644
--- a/packages/components/upload/demo/Icon.vue
+++ b/packages/components/upload/demo/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" :icon="icon" />
diff --git a/packages/components/upload/demo/ListDisplay.vue b/packages/components/upload/demo/ListDisplay.vue
index 77cb9d96d..a6767c6bf 100644
--- a/packages/components/upload/demo/ListDisplay.vue
+++ b/packages/components/upload/demo/ListDisplay.vue
@@ -1,7 +1,7 @@
 <template>
   <IxSpace direction="vertical">
     <IxRadioGroup v-model:value="curType" :options="listType"></IxRadioGroup>
-    <IxUpload v-model:files="files" action="/upload">
+    <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
       <IxButton>Upload</IxButton>
       <template #list>
         <IxUploadList :type="curType" />
@@ -21,8 +21,9 @@ const listType = [
 const curType = ref('text')
 const files = ref([
   {
-    uid: 'default',
+    key: 'default',
     name: 'idux.svg',
+    status: 'success',
     thumbUrl: '/icons/logo.svg',
   },
 ])
diff --git a/packages/components/upload/demo/Manual.vue b/packages/components/upload/demo/Manual.vue
index 4f4c6e2cc..9502ab54c 100644
--- a/packages/components/upload/demo/Manual.vue
+++ b/packages/components/upload/demo/Manual.vue
@@ -1,5 +1,9 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" @beforeUpload="onBeforeUpload">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    @beforeUpload="onBeforeUpload"
+  >
     <IxButton>Manual upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
@@ -25,7 +29,7 @@ const onBeforeUpload = (file: UploadFile) => {
     formData.append('file', file.raw!.slice(start, end))
 
     // custom request
-    fetch('/upload', {
+    fetch('https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354', {
       method: 'POST',
       body: formData,
     })
diff --git a/packages/components/upload/demo/MaxCount.vue b/packages/components/upload/demo/MaxCount.vue
index 4f242705a..a3e5880a4 100644
--- a/packages/components/upload/demo/MaxCount.vue
+++ b/packages/components/upload/demo/MaxCount.vue
@@ -1,6 +1,10 @@
 <template>
   <IxInputNumber v-model:value="maxCount" style="margin-bottom: 8px" />
-  <IxUpload v-model:files="files" action="/upload" :maxCount="maxCount">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    :maxCount="maxCount"
+  >
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
diff --git a/packages/components/upload/demo/Operation.md b/packages/components/upload/demo/Operation.md
index 134980ca3..f1e294f0e 100644
--- a/packages/components/upload/demo/Operation.md
+++ b/packages/components/upload/demo/Operation.md
@@ -7,8 +7,12 @@ order: 13
 
 ## zh
 
-支持对文件进行操作
+支持对单文件操作如预览（onPreview）、下载（onDownload）、移除（onRemove）、失败重试（onRetry）。
+
+> IxUpload内置默认预览，上传成功后，若文件file存在thumbUrl可展示图片预览，若配置了`onPreview`则会覆盖默认的预览
 
 ## en
 
-Support operations on files.
+Supports single file operations such as preview (onPreview), download (onDownload), removal (onRemove), and failure retry (onRetry).
+
+> IxUpload has a built-in default preview. After the upload is successful, if the file file exists in the thumbUrl, the image preview can be displayed. If `onPreview` is configured, the default preview will be overwritten.
diff --git a/packages/components/upload/demo/Operation.vue b/packages/components/upload/demo/Operation.vue
index 1e4b522cc..95d43d5bb 100644
--- a/packages/components/upload/demo/Operation.vue
+++ b/packages/components/upload/demo/Operation.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList
@@ -31,7 +31,7 @@ const icon = ref({
 })
 const files: Ref<UploadFile[]> = ref([
   {
-    uid: 'default',
+    key: 'default',
     name: 'error.png',
     status: 'error',
     errorTip: 'error',
diff --git a/packages/components/upload/demo/StrokeColor.vue b/packages/components/upload/demo/StrokeColor.vue
index 0045d3533..cf93aa169 100644
--- a/packages/components/upload/demo/StrokeColor.vue
+++ b/packages/components/upload/demo/StrokeColor.vue
@@ -1,7 +1,7 @@
 <template>
   <IxUpload
     v-model:files="files"
-    action="/upload"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
     :progress="{
       strokeColor: {
         '0%': '#108ee9',
diff --git a/packages/components/upload/docs/Index.zh.md b/packages/components/upload/docs/Index.zh.md
index 25a293220..f8d7a0222 100644
--- a/packages/components/upload/docs/Index.zh.md
+++ b/packages/components/upload/docs/Index.zh.md
@@ -30,11 +30,11 @@ order: 0
 | `customRequest` | 覆盖内置的上传行为，自定义上传实现 | `(option: UploadRequestOption) => { abort: () => void }` | 基于XMLHttpRequest实现  | - | - |
 | `requestData` | 上传附加的参数  | `Record<string, unknown> \| ((file: UploadFile) => Record<string, unknown> \| Promise<Record<string, unknown>>)` | - | - | - |
 | `requestHeaders` | 设置上传请求的请求头  | `UploadRequestHeader` | -  | -  | -  |
-| `requestMethod` | 上传请求的http method | `string` | `post` | ✅ | - |
+| `requestMethod` | 上传请求的http method | `UploadRequestMethod` | `post` | ✅ | - |
 | `onSelect` | 选中文件时钩子 | `(file: File[]) => boolean \| File[] \| Promise<boolean \| File[]>` | `() => true` | - | - |
 | `onFileStatusChange` | 上传文件改变时的状态 | `(file: UploadFile) => void` | - | - | - |
 | `onBeforeUpload`   | 文件上传前的钩子，根据返回结果是否上传<br />返回`false`阻止上传<br />返回`Promise`对象`reject`时停止上传<br />返回`Promise`对象`resolve`时开始上传 | `(file: UploadFile) => boolean \| UploadFile \| Promise<boolean \| UploadFile>` | `() => true` | -  | -  |
-| `onRequestChange` | 请求状态改变的钩子 | `(option: UploadRequestChangeParam) => void` | - | - | - |
+| `onRequestChange` | 请求状态改变的钩子 | `(option: UploadRequestChangeOption) => void` | - | - | - |
 
 ### IxUploadFiles
 
@@ -45,7 +45,7 @@ order: 0
 | `type` | 展示的形式 | `text \| image \| imageCard` | `text` | ✅ | - |
 | `icon` | 展示的icon   | `Record<file \| preview \| download \| remove \| retry, string \| VNode`>  | `{file: 'paper-clip', remove: 'delete', retry: 'edit'}` | ✅ | - |
 | `onDownload`   | 点击下载文件时的回调 | `(file: UploadFile) => void` | -  | -  | -  |
-| `onPreview`    | 点击文件链接或预览图标时的回调 | `(file: UploadFile) => boolean \| Promise<boolean>` | - | - | - |
+| `onPreview`    | 点击文件链接或预览图标时的回调 | `(file: UploadFile) => void` | - | - | - |
 | `onRemove`     | 点击移除文件时的回调，返回boolean表示是否允许移除，支持Promise | `(file: UploadFile) => boolean \| Promise<boolean>` | `() => true` | -  | - |
 | `onRetry`      | 点击重新上传时的回调 | `(file: UploadFile) => void` | - | - | - |
 
@@ -60,24 +60,24 @@ order: 0
 ```typescript
 // 上传文件
 interface UploadFile {
-  uid: VKey // 唯一标识
+  key: VKey // 唯一标识
   name: string // 文件名
-  raw?: UploadRawFile
+  raw?: File
   status?: 'selected' | 'uploading' | 'error' | 'success' | 'abort' // 当前状态
-  error?: Error // 详细的报错信息，比如请求失败时
+  error?: UploadRequestError // 详细的报错信息，比如请求失败时
   errorTip?: string // 小i报错提示文本
   thumbUrl?: string  // 缩略图链接
   percent?: number // 上传进度
-  response?: Response // 服务端响应内容
+  response?: any // 服务端响应内容
 }
 
 // 自定义上传方法的参数
-interface UploadRequestOption {
+interface UploadRequestOption<T = unknown> {
   onProgress?: (event: UploadProgressEvent) => void
-  onError?: (event: UploadRequestError | ProgressEvent, body?: T) => void
+  onError?: (error: UploadRequestError) => void
   onSuccess?: (body: T) => void
-  filename: string
-  file: UploadRawFile | File
+  name: string
+  file: File
   withCredentials?: boolean
   action: string
   requestHeaders?: UploadRequestHeader
@@ -89,7 +89,8 @@ interface UploadRequestOption {
 interface UploadRequestChangeOption {
   file: UploadFile
   status: 'loadstart' | 'progress' | 'abort' | 'error' | 'loadend'
-  res?: Response
-  e?: ProgressEvent
+  response?: any
+  event?: UploadProgressEvent
+  error?: UploadRequestError
 }
 ```
diff --git a/packages/components/upload/index.ts b/packages/components/upload/index.ts
index 25f21be56..108abef34 100644
--- a/packages/components/upload/index.ts
+++ b/packages/components/upload/index.ts
@@ -16,7 +16,6 @@ const IxUploadList = UploadList as unknown as UploadListComponent
 export { IxUpload, IxUploadList }
 
 export type {
-  UploadRawFile,
   UploadListType,
   UploadRequestMethod,
   UploadRequestStatus,
diff --git a/packages/components/upload/src/List.tsx b/packages/components/upload/src/List.tsx
index 8be46f4eb..b45500fa1 100644
--- a/packages/components/upload/src/List.tsx
+++ b/packages/components/upload/src/List.tsx
@@ -41,5 +41,5 @@ export default defineComponent({
 })
 
 function useListType(props: UploadListProps, config: UploadListConfig) {
-  return computed(() => props.type ?? config.listType)
+  return computed(() => props.type ?? config.type)
 }
diff --git a/packages/components/upload/src/Upload.tsx b/packages/components/upload/src/Upload.tsx
index 0b9d14b53..1090b7445 100644
--- a/packages/components/upload/src/Upload.tsx
+++ b/packages/components/upload/src/Upload.tsx
@@ -7,9 +7,10 @@
 
 import type { Ref } from 'vue'
 
-import { defineComponent, provide, ref } from 'vue'
+import { defineComponent, provide, ref, shallowRef } from 'vue'
 
 import { useControlledProp } from '@idux/cdk/utils'
+import { IxImageViewer } from '@idux/components/image'
 
 import FileSelector from './component/Selector'
 import { useCmpClasses } from './composables/useDisplay'
@@ -25,6 +26,7 @@ export default defineComponent({
     const [showSelector, setSelectorVisible] = useShowSelector()
     const [files, onUpdateFiles] = useControlledProp(props, 'files', [])
     const { fileUploading, abort, startUpload, upload } = useRequest(props, files)
+    const { viewerVisible, images, setViewerVisible } = useImageViewer()
     provide(uploadToken, {
       props,
       files,
@@ -33,13 +35,15 @@ export default defineComponent({
       abort,
       startUpload,
       upload,
+      setViewerVisible,
       setSelectorVisible,
     })
 
     return () => (
-      <div>
+      <div class={cpmClasses.value}>
         {showSelector.value && <FileSelector>{slots.default?.()}</FileSelector>}
         {slots.list?.({ abort, upload })}
+        <IxImageViewer v-model:visible={viewerVisible.value} images={images.value}></IxImageViewer>
         <div class={`${cpmClasses.value}-tip`}>{slots.tip?.()}</div>
       </div>
     )
@@ -55,3 +59,19 @@ function useShowSelector(): [Ref<boolean>, (isShow: boolean) => void] {
 
   return [showSelector, setSelectorVisible]
 }
+
+function useImageViewer() {
+  const viewerVisible = ref(false)
+  const images = shallowRef<string[]>([])
+
+  function setViewerVisible(visible: boolean, imageSrc?: string): void {
+    images.value = visible && imageSrc ? [imageSrc] : []
+    viewerVisible.value = visible
+  }
+
+  return {
+    viewerVisible,
+    images,
+    setViewerVisible,
+  }
+}
diff --git a/packages/components/upload/src/component/ImageCardList.tsx b/packages/components/upload/src/component/ImageCardList.tsx
index 690cf11c1..879e947fc 100644
--- a/packages/components/upload/src/component/ImageCardList.tsx
+++ b/packages/components/upload/src/component/ImageCardList.tsx
@@ -37,7 +37,7 @@ export default defineComponent({
   name: 'IxUploadImageCardList',
   props: uploadListProps,
   setup(listProps) {
-    const { props: uploadProps, files, upload, abort, onUpdateFiles } = inject(uploadToken)!
+    const { props: uploadProps, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)!
     const icons = useIcon(listProps)
     const cpmClasses = useCmpClasses()
     const listClasses = useListClasses(uploadProps, 'imageCard')
@@ -45,7 +45,12 @@ export default defineComponent({
     const [, imageCardVisible] = useSelectorVisible(uploadProps, 'imageCard')
     const showSelector = useShowSelector(uploadProps, files, imageCardVisible)
     const { getThumbNode, revokeAll } = useThumb()
-    const fileOperation = useOperation(files, listProps, uploadProps, { abort, upload, onUpdateFiles })
+    const fileOperation = useOperation(files, listProps, uploadProps, {
+      abort,
+      upload,
+      onUpdateFiles,
+      setViewerVisible,
+    })
     const selectorNode = renderSelector(cpmClasses)
 
     onBeforeUnmount(revokeAll)
diff --git a/packages/components/upload/src/component/ImageList.tsx b/packages/components/upload/src/component/ImageList.tsx
index d82f9f2fc..5c7d27790 100644
--- a/packages/components/upload/src/component/ImageList.tsx
+++ b/packages/components/upload/src/component/ImageList.tsx
@@ -29,13 +29,18 @@ export default defineComponent({
   name: 'IxUploadImageList',
   props: uploadListProps,
   setup(listProps) {
-    const { props: uploadProps, files, upload, abort, onUpdateFiles } = inject(uploadToken)!
+    const { props: uploadProps, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)!
     const icons = useIcon(listProps)
     const cpmClasses = useCmpClasses()
     const listClasses = useListClasses(uploadProps, 'image')
     const locale = getLocale('upload')
     const { getThumbNode, revokeAll } = useThumb()
-    const fileOperation = useOperation(files, listProps, uploadProps, { abort, upload, onUpdateFiles })
+    const fileOperation = useOperation(files, listProps, uploadProps, {
+      abort,
+      upload,
+      onUpdateFiles,
+      setViewerVisible,
+    })
 
     onBeforeUnmount(revokeAll)
 
diff --git a/packages/components/upload/src/component/Selector.tsx b/packages/components/upload/src/component/Selector.tsx
index 5d08a04ab..6e07a3ebe 100644
--- a/packages/components/upload/src/component/Selector.tsx
+++ b/packages/components/upload/src/component/Selector.tsx
@@ -19,7 +19,7 @@ import { useGlobalConfig } from '@idux/components/config'
 import { useCmpClasses } from '../composables/useDisplay'
 import { useDrag } from '../composables/useDrag'
 import { uploadToken } from '../token'
-import { getFileInfo, getFilesAcceptAllow, getFilesCountAllow } from '../util/file'
+import { getFileInfo, getFilesAcceptAllow, getFilesCountAllow } from '../util/fileHandle'
 
 export default defineComponent({
   name: 'IxUploadSelector',
@@ -163,7 +163,7 @@ function syncUploadHandle(
     const filesAfterHandle = uploadProps.onSelect ? await callEmit(uploadProps.onSelect, filesReady$$) : filesReady$$
     const filesReadyUpload = getFilesHandled(filesAfterHandle!, filesReady$$)
     const filesFormat = getFormatFiles(filesReadyUpload, uploadProps, 'selected')
-    const filesIds = filesFormat.map(file => file.uid)
+    const filesIds = filesFormat.map(file => file.key)
     if (uploadProps.maxCount === 1) {
       files.value.forEach(file => abort(file))
       callEmit(onUpdateFiles, filesFormat)
@@ -173,7 +173,7 @@ function syncUploadHandle(
 
     await nextTick(() => {
       files.value
-        .filter(item => filesIds.includes(item.uid))
+        .filter(item => filesIds.includes(item.key))
         .forEach(file => {
           startUpload(file)
         })
diff --git a/packages/components/upload/src/component/TextList.tsx b/packages/components/upload/src/component/TextList.tsx
index dce42dc8c..9ffcff50d 100644
--- a/packages/components/upload/src/component/TextList.tsx
+++ b/packages/components/upload/src/component/TextList.tsx
@@ -28,12 +28,17 @@ export default defineComponent({
   name: 'IxUploadTextList',
   props: uploadListProps,
   setup(listProps) {
-    const { props: uploadProps, files, upload, abort, onUpdateFiles } = inject(uploadToken)!
+    const { props: uploadProps, files, upload, abort, onUpdateFiles, setViewerVisible } = inject(uploadToken)!
     const icons = useIcon(listProps)
     const cpmClasses = useCmpClasses()
     const listClasses = useListClasses(uploadProps, 'text')
     const locale = getLocale('upload')
-    const fileOperation = useOperation(files, listProps, uploadProps, { abort, upload, onUpdateFiles })
+    const fileOperation = useOperation(files, listProps, uploadProps, {
+      abort,
+      upload,
+      onUpdateFiles,
+      setViewerVisible,
+    })
 
     return () =>
       files.value.length > 0 && (
diff --git a/packages/components/upload/src/composables/useDisplay.ts b/packages/components/upload/src/composables/useDisplay.ts
index 0d36484ec..80d58eb54 100644
--- a/packages/components/upload/src/composables/useDisplay.ts
+++ b/packages/components/upload/src/composables/useDisplay.ts
@@ -5,19 +5,15 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { UploadListProps, UploadListType, UploadProps } from '../types'
+import type { UploadFile, UploadListProps, UploadListType, UploadProps } from '../types'
 import type { IconsMap } from '../util/icon'
-import type { ProgressGradient } from '@idux/components/progress'
-import type { ComputedRef, ShallowRef } from 'vue'
+import type { ComputedRef, ShallowRef, VNode } from 'vue'
 
-import { VNode, computed, h, isProxy, normalizeClass, shallowRef } from 'vue'
+import { computed, h, isProxy, normalizeClass, shallowRef } from 'vue'
 
 import { useGlobalConfig } from '@idux/components/config'
-import { isImage } from '@idux/components/upload/src/util/file'
 
-import { UploadFile } from '../types'
-
-export type StrokeColorType = ProgressGradient | string
+import { isImage } from '../util/fileHandle'
 
 export function useCmpClasses(): ComputedRef<string> {
   const commonPrefix = useGlobalConfig('common')
diff --git a/packages/components/upload/src/composables/useOperation.ts b/packages/components/upload/src/composables/useOperation.ts
index cd9557d67..32bec1f05 100644
--- a/packages/components/upload/src/composables/useOperation.ts
+++ b/packages/components/upload/src/composables/useOperation.ts
@@ -11,7 +11,7 @@ import type { ComputedRef } from 'vue'
 
 import { callEmit } from '@idux/cdk/utils'
 
-import { getTargetFile, getTargetFileIndex } from '../util/file'
+import { getTargetFile, getTargetFileIndex } from '../util/fileHandle'
 
 export interface FileOperation {
   abort: (file: UploadFile) => void
@@ -25,7 +25,7 @@ export function useOperation(
   files: ComputedRef<UploadFile[]>,
   listProps: UploadListProps,
   uploadProps: UploadProps,
-  opr: Pick<UploadToken, 'abort' | 'upload' | 'onUpdateFiles'>,
+  opr: Pick<UploadToken, 'abort' | 'upload' | 'onUpdateFiles' | 'setViewerVisible'>,
 ): FileOperation {
   const abort = (file: UploadFile) => {
     opr.abort(file)
@@ -50,6 +50,10 @@ export function useOperation(
     if (uploadProps.disabled) {
       return
     }
+    if (!listProps.onPreview && file.thumbUrl) {
+      opr.setViewerVisible(true, file.thumbUrl)
+      return
+    }
     callEmit(listProps.onPreview, file)
   }
 
diff --git a/packages/components/upload/src/composables/useRequest.ts b/packages/components/upload/src/composables/useRequest.ts
index 8cebdf19b..ee18eaf13 100644
--- a/packages/components/upload/src/composables/useRequest.ts
+++ b/packages/components/upload/src/composables/useRequest.ts
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { UploadFile, UploadProgressEvent, UploadProps, UploadRequestOption } from '../types'
+import type { UploadFile, UploadProgressEvent, UploadProps, UploadRequestError, UploadRequestOption } from '../types'
 import type { VKey } from '@idux/cdk/utils'
 import type { ComputedRef, Ref } from 'vue'
 
@@ -16,7 +16,7 @@ import { isFunction, isUndefined } from 'lodash-es'
 import { callEmit, throwError } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
-import { getTargetFile, getTargetFileIndex, setFileStatus } from '../util/file'
+import { getTargetFile, getTargetFileIndex, setFileStatus } from '../util/fileHandle'
 import defaultUpload from '../util/request'
 
 export interface UploadRequest {
@@ -36,11 +36,11 @@ export function useRequest(props: UploadProps, files: ComputedRef<UploadFile[]>)
     if (!curFile) {
       return
     }
-    const curAbort = aborts.get(curFile.uid)
+    const curAbort = aborts.get(curFile.key)
     curAbort?.()
     setFileStatus(curFile, 'abort', props.onFileStatusChange)
     fileUploading.value.splice(getTargetFileIndex(curFile, fileUploading.value), 1)
-    aborts.delete(curFile.uid)
+    aborts.delete(curFile.key)
     props.onRequestChange &&
       callEmit(props.onRequestChange, {
         status: 'abort',
@@ -83,15 +83,16 @@ export function useRequest(props: UploadProps, files: ComputedRef<UploadFile[]>)
     const requestData = await getRequestData(props, file)
     const requestOption = {
       file: file.raw,
-      filename: props.name ?? config.name,
+      name: props.name ?? config.name,
       withCredentials: props.withCredentials ?? config.withCredentials,
       action: action,
       requestHeaders: props.requestHeaders ?? {},
       requestMethod: props.requestMethod ?? config.requestMethod,
       requestData: requestData,
-      onProgress: (e: UploadProgressEvent) => _onProgress(e, file),
-      onError: (error: Error) => _onError(error, file),
-      onSuccess: (res: Response) => _onSuccess(res, file),
+      onProgress: (event: UploadProgressEvent) => _onProgress(event, file),
+      onError: (error: UploadRequestError) => _onError(error, file),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onSuccess: (res: any) => _onSuccess(res, file),
     } as UploadRequestOption
     const uploadHttpRequest = props.customRequest ?? config.customRequest ?? defaultUpload
 
@@ -102,40 +103,42 @@ export function useRequest(props: UploadProps, files: ComputedRef<UploadFile[]>)
       })
     setFileStatus(file, 'uploading', props.onFileStatusChange)
     file.percent = 0
-    aborts.set(file.uid, uploadHttpRequest(requestOption)?.abort ?? (() => {}))
+    aborts.set(file.key, uploadHttpRequest(requestOption)?.abort ?? (() => {}))
     fileUploading.value.push(file)
   }
 
-  function _onProgress(e: UploadProgressEvent, file: UploadFile): void {
+  function _onProgress(event: UploadProgressEvent, file: UploadFile): void {
     const curFile = getTargetFile(file, files.value)
     if (!curFile) {
       return
     }
-    curFile.percent = e.percent ?? 0
+    curFile.percent = event.percent ?? 0
     props.onRequestChange &&
       callEmit(props.onRequestChange, {
         status: 'progress',
         file: { ...curFile },
-        e,
+        event,
       })
   }
 
-  function _onError(error: Error, file: UploadFile): void {
+  function _onError(error: UploadRequestError, file: UploadFile): void {
     const curFile = getTargetFile(file, files.value)
     if (!curFile) {
       return
     }
     fileUploading.value.splice(getTargetFileIndex(curFile, fileUploading.value), 1)
+    curFile.error = error
     props.onRequestChange &&
       callEmit(props.onRequestChange, {
         file: { ...curFile },
         status: 'error',
+        error,
       })
     setFileStatus(curFile, 'error', props.onFileStatusChange)
-    curFile.error = error
   }
 
-  function _onSuccess(res: Response, file: UploadFile): void {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function _onSuccess(res: any, file: UploadFile): void {
     const curFile = getTargetFile(file, files.value)
     if (!curFile) {
       return
@@ -145,6 +148,7 @@ export function useRequest(props: UploadProps, files: ComputedRef<UploadFile[]>)
       callEmit(props.onRequestChange, {
         status: 'loadend',
         file: { ...curFile },
+        response: res,
       })
     setFileStatus(curFile, 'success', props.onFileStatusChange)
     fileUploading.value.splice(getTargetFileIndex(curFile, fileUploading.value), 1)
diff --git a/packages/components/upload/src/token.ts b/packages/components/upload/src/token.ts
index 87f9ec785..ecb28d6da 100644
--- a/packages/components/upload/src/token.ts
+++ b/packages/components/upload/src/token.ts
@@ -12,6 +12,7 @@ import type { ComputedRef, InjectionKey } from 'vue'
 export type UploadToken = {
   props: UploadProps
   files: ComputedRef<UploadFile[]>
+  setViewerVisible: (visible: boolean, imageSrc?: string) => void
   onUpdateFiles: (file: UploadFile[]) => void
   setSelectorVisible: (isShow: boolean) => void
 } & UploadRequest
diff --git a/packages/components/upload/src/types.ts b/packages/components/upload/src/types.ts
index a36838d7d..95c47459a 100644
--- a/packages/components/upload/src/types.ts
+++ b/packages/components/upload/src/types.ts
@@ -26,26 +26,24 @@ export interface UploadRequestError extends Error {
   method?: UploadRequestMethod
   url?: string
 }
-export interface UploadRawFile extends File {
-  uid: VKey
-}
 export interface UploadFile {
-  uid: VKey
+  key: VKey
   name: string
-  raw?: UploadRawFile
+  raw?: File
   status?: UploadFileStatus
-  error?: Error
+  error?: UploadRequestError
   errorTip?: string
   thumbUrl?: string
   percent?: number
-  response?: Response
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  response?: any
 }
 export interface UploadRequestOption<T = unknown> {
   onProgress?: (event: UploadProgressEvent) => void
-  onError?: (event: UploadRequestError | ProgressEvent, body?: T) => void
+  onError?: (error: UploadRequestError) => void
   onSuccess?: (body: T) => void
-  filename: string
-  file: UploadRawFile | File
+  name: string
+  file: File
   withCredentials?: boolean
   action: string
   requestHeaders?: UploadRequestHeader
@@ -55,8 +53,10 @@ export interface UploadRequestOption<T = unknown> {
 export interface UploadRequestChangeOption {
   file: UploadFile
   status: UploadRequestStatus
-  response?: Response
-  e?: ProgressEvent
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  response?: any
+  event?: UploadProgressEvent
+  error?: UploadRequestError
 }
 
 export const uploadProps = {
diff --git a/packages/components/upload/src/util/file.ts b/packages/components/upload/src/util/fileHandle.ts
similarity index 92%
rename from packages/components/upload/src/util/file.ts
rename to packages/components/upload/src/util/fileHandle.ts
index ac730eec4..94b4fb2eb 100644
--- a/packages/components/upload/src/util/file.ts
+++ b/packages/components/upload/src/util/fileHandle.ts
@@ -10,23 +10,23 @@ import type { UploadFile, UploadFileStatus } from '../types'
 import { callEmit, uniqueId } from '@idux/cdk/utils'
 
 export function getFileInfo(file: File, options: Partial<UploadFile> = {}): UploadFile {
-  const uid = uniqueId()
+  const key = uniqueId()
   return {
-    uid,
+    key,
     name: file.name,
-    raw: Object.assign(file, { uid }),
+    raw: file,
     percent: 0,
     ...options,
   }
 }
 
 export function getTargetFile(file: UploadFile, files: UploadFile[]): UploadFile | undefined {
-  const matchKey = file.uid !== undefined ? 'uid' : 'name'
+  const matchKey = file.key !== undefined ? 'key' : 'name'
   return files.find(item => item[matchKey] === file[matchKey])
 }
 
 export function getTargetFileIndex(file: UploadFile, files: UploadFile[]): number {
-  const matchKey = file.uid !== undefined ? 'uid' : 'name'
+  const matchKey = file.key !== undefined ? 'key' : 'name'
   return files.findIndex(item => item[matchKey] === file[matchKey])
 }
 
diff --git a/packages/components/upload/src/util/request.ts b/packages/components/upload/src/util/request.ts
index ca9f4c274..c72d8209e 100644
--- a/packages/components/upload/src/util/request.ts
+++ b/packages/components/upload/src/util/request.ts
@@ -17,7 +17,14 @@ type UploadReturnType = {
 }
 
 function getError(option: UploadRequestOption, xhr: XMLHttpRequest) {
-  const msg = `cannot ${option.requestMethod} ${option.action} ${xhr.status}'`
+  let msg: string
+  if (xhr.response) {
+    msg = `${xhr.response.error || xhr.response}`
+  } else if (xhr.responseText) {
+    msg = `${xhr.responseText}`
+  } else {
+    msg = `fail to ${option.requestMethod} ${option.action} ${xhr.status}`
+  }
   const err = new Error(msg) as UploadRequestError
   err.status = xhr.status
   err.method = option.requestMethod
@@ -66,15 +73,15 @@ export default function upload(option: UploadRequestOption): UploadReturnType {
     })
   }
 
-  formData.append(option.filename, option.file, option.file.name)
+  formData.append(option.name, option.file, option.file.name)
 
-  xhr.onerror = function error(e) {
-    option.onError?.(e)
+  xhr.onerror = function error() {
+    option.onError?.(getError(option, xhr))
   }
 
   xhr.onload = function onload() {
     if (xhr.status < 200 || xhr.status >= 300) {
-      return option.onError?.(getError(option, xhr), getBody(xhr))
+      return option.onError?.(getError(option, xhr))
     }
 
     return option.onSuccess?.(getBody(xhr))