diff --git a/package.json b/package.json
index 09f8b296..f8e7115c 100755
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "element-plus": "^2.10.2",
     "eruda": "^3.4.3",
     "es-toolkit": "^1.39.5",
+    "filesize": "^10.1.6",
     "hotkeys-js": "^3.13.14",
     "lucide-vue-next": "^0.525.0",
     "mitt": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71923315..32684c60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ importers:
       es-toolkit:
         specifier: ^1.39.5
         version: 1.39.5
+      filesize:
+        specifier: ^10.1.6
+        version: 10.1.6
       hotkeys-js:
         specifier: ^3.13.14
         version: 3.13.14
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
deleted file mode 100755
index a05b7802..00000000
--- a/src/components/ImageUpload/index.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import type { UploadProps } from 'element-plus'
-import { toast } from 'vue-sonner'
-
-defineOptions({
-  name: 'ImageUpload',
-})
-
-const props = withDefaults(
-  defineProps<{
-    action: UploadProps['action']
-    headers?: UploadProps['headers']
-    data?: UploadProps['data']
-    name?: UploadProps['name']
-    size?: number
-    width?: number
-    height?: number
-    placeholder?: string
-    notip?: boolean
-    ext?: string[]
-    httpRequest?: UploadProps['httpRequest']
-  }>(),
-  {
-    name: 'file',
-    size: 2,
-    width: 150,
-    height: 150,
-    placeholder: '',
-    notip: false,
-    ext: () => ['jpg', 'png', 'gif', 'bmp'],
-  },
-)
-
-const emits = defineEmits<{
-  onSuccess: [
-    res: any,
-  ]
-}>()
-
-const url = defineModel<string>({
-  default: '',
-})
-
-const uploadData = ref({
-  imageViewerVisible: false,
-  progress: {
-    preview: '',
-    percent: 0,
-  },
-})
-
-// 预览
-function preview() {
-  uploadData.value.imageViewerVisible = true
-}
-// 关闭预览
-function previewClose() {
-  uploadData.value.imageViewerVisible = false
-}
-// 移除
-function remove() {
-  url.value = ''
-}
-const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-  const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1) ?? ''
-  const isTypeOk = props.ext.includes(fileExt)
-  const isSizeOk = file.size / 1024 / 1024 < props.size
-  if (!isTypeOk) {
-    toast.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
-  }
-  if (!isSizeOk) {
-    toast.error(`上传图片大小不能超过 ${props.size}MB！`)
-  }
-  if (isTypeOk && isSizeOk) {
-    uploadData.value.progress.preview = URL.createObjectURL(file)
-  }
-  return isTypeOk && isSizeOk
-}
-const onProgress: UploadProps['onProgress'] = (file) => {
-  uploadData.value.progress.percent = ~~file.percent
-}
-const onSuccess: UploadProps['onSuccess'] = (res) => {
-  uploadData.value.progress.preview = ''
-  uploadData.value.progress.percent = 0
-  emits('onSuccess', res)
-}
-</script>
-
-<template>
-  <div class="upload-container">
-    <ElUpload
-      :show-file-list="false"
-      :headers="headers"
-      :action="action"
-      :data="data"
-      :name="name"
-      :before-upload="beforeUpload"
-      :on-progress="onProgress"
-      :on-success="onSuccess"
-      :http-request="httpRequest"
-      drag
-      class="image-upload"
-    >
-      <ElImage v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
-        <template #error>
-          <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-            <FaIcon name="i-ep:plus" class="icon" />
-          </div>
-        </template>
-      </ElImage>
-      <div v-else class="image">
-        <ElImage :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <div class="mask">
-          <div class="actions">
-            <span @click.stop="preview">
-              <FaIcon name="i-ep:zoom-in" class="icon" />
-            </span>
-            <span @click.stop="remove">
-              <FaIcon name="i-ep:delete" class="icon" />
-            </span>
-          </div>
-        </div>
-      </div>
-      <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-      </div>
-    </ElUpload>
-    <div v-if="!notip" class="el-upload__tip">
-      <div style="display: inline-block;">
-        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
-      </div>
-    </div>
-    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
-  </div>
-</template>
-
-<style scoped>
-.upload-container {
-  line-height: initial;
-}
-
-.el-image {
-  display: block;
-}
-
-.image {
-  position: relative;
-  overflow: hidden;
-  border-radius: 6px;
-
-  .mask {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--el-overlay-color-lighter);
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    .actions {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      width: 100px;
-      height: 100px;
-      transform: translateX(-50%) translateY(-50%);
-
-      span {
-        width: 50%;
-        color: var(--el-color-white);
-        text-align: center;
-        cursor: pointer;
-        transition: color 0.1s, transform 0.1s;
-
-        &:hover {
-          transform: scale(1.5);
-        }
-
-        .icon {
-          font-size: 24px;
-        }
-      }
-    }
-  }
-
-  &:hover .mask {
-    opacity: 1;
-  }
-}
-
-.image-upload {
-  display: inline-block;
-  vertical-align: top;
-}
-
-:deep(.el-upload) {
-  .el-upload-dragger {
-    display: inline-block;
-    padding: 0;
-
-    &.is-dragover {
-      border-width: 1px;
-    }
-
-    .image-slot {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: var(--el-text-color-placeholder);
-      background-color: transparent;
-
-      .icon {
-        font-size: 30px;
-      }
-    }
-
-    .progress {
-      position: absolute;
-      top: 0;
-
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: "";
-        background-color: var(--el-overlay-color-lighter);
-      }
-
-      .el-progress {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 1;
-        transform: translateX(-50%) translateY(-50%);
-
-        .el-progress__text {
-          color: var(--el-text-color-placeholder);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
deleted file mode 100755
index 293d933e..00000000
--- a/src/components/ImagesUpload/index.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<script setup lang="ts">
-import type { UploadProps } from 'element-plus'
-import { toast } from 'vue-sonner'
-
-defineOptions({
-  name: 'ImagesUpload',
-})
-
-const props = withDefaults(
-  defineProps<{
-    action: UploadProps['action']
-    headers?: UploadProps['headers']
-    data?: UploadProps['data']
-    name?: UploadProps['name']
-    size?: number
-    max?: number
-    width?: number
-    height?: number
-    placeholder?: string
-    notip?: boolean
-    ext?: string[]
-    httpRequest?: UploadProps['httpRequest']
-  }>(),
-  {
-    name: 'file',
-    size: 2,
-    max: 3,
-    width: 150,
-    height: 150,
-    placeholder: '',
-    notip: false,
-    ext: () => ['jpg', 'png', 'gif', 'bmp'],
-  },
-)
-
-const emits = defineEmits<{
-  onSuccess: [
-    res: any,
-  ]
-}>()
-
-const url = defineModel<string[]>({
-  default: [],
-})
-
-const uploadData = ref({
-  dialogImageIndex: 0,
-  imageViewerVisible: false,
-  progress: {
-    preview: '',
-    percent: 0,
-  },
-})
-
-// 预览
-function preview(index: number) {
-  uploadData.value.dialogImageIndex = index
-  uploadData.value.imageViewerVisible = true
-}
-// 关闭预览
-function previewClose() {
-  uploadData.value.imageViewerVisible = false
-}
-// 移除
-function remove(index: number) {
-  url.value.splice(index, 1)
-}
-// 移动
-function move(index: number, type: 'left' | 'right') {
-  if (type === 'left' && index !== 0) {
-    url.value[index] = url.value.splice(index - 1, 1, url.value[index])[0]
-  }
-  if (type === 'right' && index !== url.value.length - 1) {
-    url.value[index] = url.value.splice(index + 1, 1, url.value[index])[0]
-  }
-}
-
-const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-  const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1) ?? ''
-  const isTypeOk = props.ext.includes(fileExt)
-  const isSizeOk = file.size / 1024 / 1024 < props.size
-  if (!isTypeOk) {
-    toast.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
-  }
-  if (!isSizeOk) {
-    toast.error(`上传图片大小不能超过 ${props.size}MB！`)
-  }
-  if (isTypeOk && isSizeOk) {
-    uploadData.value.progress.preview = URL.createObjectURL(file)
-  }
-  return isTypeOk && isSizeOk
-}
-const onProgress: UploadProps['onProgress'] = (file) => {
-  uploadData.value.progress.percent = ~~file.percent
-}
-const onSuccess: UploadProps['onSuccess'] = (res) => {
-  uploadData.value.progress.preview = ''
-  uploadData.value.progress.percent = 0
-  emits('onSuccess', res)
-}
-</script>
-
-<template>
-  <div class="upload-container">
-    <div v-for="(item, index) in (url as string[])" :key="index" class="images">
-      <ElImage v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
-      <div class="mask">
-        <div class="actions">
-          <span @click="preview(index)">
-            <FaIcon name="i-ep:zoom-in" class="icon" />
-          </span>
-          <span @click="remove(index)">
-            <FaIcon name="i-ep:delete" class="icon" />
-          </span>
-          <span v-show="url.length > 1" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <FaIcon name="i-ep:back" class="icon" />
-          </span>
-          <span v-show="url.length > 1" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <FaIcon name="i-ep:right" class="icon" />
-          </span>
-        </div>
-      </div>
-    </div>
-    <ElUpload
-      v-show="url.length < max"
-      :show-file-list="false"
-      :headers="headers"
-      :action="action"
-      :data="data"
-      :name="name"
-      :before-upload="beforeUpload"
-      :on-progress="onProgress"
-      :on-success="onSuccess"
-      :http-request="httpRequest"
-      drag
-      class="images-upload"
-    >
-      <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <FaIcon name="i-ep:plus" class="icon" />
-      </div>
-      <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
-      </div>
-    </ElUpload>
-    <div v-if="!notip" class="el-upload__tip">
-      <div style="display: inline-block;">
-        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
-      </div>
-    </div>
-    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
-  </div>
-</template>
-
-<style scoped>
-.upload-container {
-  line-height: initial;
-}
-
-.el-image {
-  display: block;
-}
-
-.images {
-  position: relative;
-  display: inline-block;
-  margin-inline-end: 10px;
-  overflow: hidden;
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-
-  .mask {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--el-overlay-color-lighter);
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    .actions {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      width: 100px;
-      height: 100px;
-      transform: translateX(-50%) translateY(-50%);
-
-      span {
-        width: 50%;
-        color: var(--el-color-white);
-        text-align: center;
-        cursor: pointer;
-        transition: color 0.1s, transform 0.1s;
-
-        &.disabled {
-          color: var(--el-text-color-disabled);
-          cursor: not-allowed;
-        }
-
-        &:hover:not(.disabled) {
-          transform: scale(1.5);
-        }
-
-        .icon {
-          font-size: 24px;
-        }
-      }
-    }
-  }
-
-  &:hover .mask {
-    opacity: 1;
-  }
-}
-
-.images-upload {
-  display: inline-block;
-  vertical-align: top;
-}
-
-:deep(.el-upload) {
-  .el-upload-dragger {
-    display: inline-block;
-    padding: 0;
-
-    &.is-dragover {
-      border-width: 1px;
-    }
-
-    .image-slot {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: var(--el-text-color-placeholder);
-      background-color: transparent;
-
-      .icon {
-        font-size: 30px;
-      }
-    }
-
-    .progress {
-      position: absolute;
-      top: 0;
-
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: "";
-        background-color: var(--el-overlay-color-lighter);
-      }
-
-      .el-progress {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 1;
-        transform: translateX(-50%) translateY(-50%);
-
-        .el-progress__text {
-          color: var(--el-text-color-placeholder);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/mock/upload.ts b/src/mock/upload.ts
new file mode 100644
index 00000000..2e663982
--- /dev/null
+++ b/src/mock/upload.ts
@@ -0,0 +1,17 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+
+export default defineFakeRoute([
+  {
+    url: '/mock/upload/image',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          url: 'https://fantastic-admin.hurui.me/logo.svg',
+        },
+      }
+    },
+  },
+])
diff --git a/src/router/modules/component.example.ts b/src/router/modules/component.example.ts
index 6ef3b668..faffbdfc 100755
--- a/src/router/modules/component.example.ts
+++ b/src/router/modules/component.example.ts
@@ -118,6 +118,14 @@ const routes: RouteRecordRaw = {
             title: '图片预览',
           },
         },
+        {
+          path: 'imageupload',
+          name: 'componentExampleBuiltInImageUpload',
+          component: () => import('@/views/component_built_in_example/imageupload.vue'),
+          meta: {
+            title: '图片上传',
+          },
+        },
         {
           path: 'input',
           name: 'componentExampleBuiltInInput',
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 5cc8de04..b7575060 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -25,6 +25,7 @@ declare module 'vue' {
     FaHoverCard: typeof import('./../ui/components/FaHoverCard/index.vue')['default']
     FaIcon: typeof import('./../ui/components/FaIcon/index.vue')['default']
     FaImagePreview: typeof import('./../ui/components/FaImagePreview/index.vue')['default']
+    FaImageUpload: typeof import('./../ui/components/FaImageUpload/index.vue')['default']
     FaInput: typeof import('./../ui/components/FaInput/index.vue')['default']
     FaKbd: typeof import('./../ui/components/FaKbd/index.vue')['default']
     FaMaskScrollContainer: typeof import('./../ui/components/FaMaskScrollContainer/index.vue')['default']
@@ -48,8 +49,6 @@ declare module 'vue' {
     FaToast: typeof import('./../ui/components/FaToast/index.vue')['default']
     FaTooltip: typeof import('./../ui/components/FaTooltip/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
-    ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
-    ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/ui/components/FaImageUpload/index.vue b/src/ui/components/FaImageUpload/index.vue
new file mode 100644
index 00000000..e2b35884
--- /dev/null
+++ b/src/ui/components/FaImageUpload/index.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import axios from 'axios'
+import { filesize } from 'filesize'
+import { toast } from 'vue-sonner'
+import { useFaImagePreview } from '@/ui/components/FaImagePreview'
+import { cn } from '@/utils'
+
+const props = withDefaults(defineProps<{
+  action: string
+  method?: string
+  headers?: Headers | Record<string, any>
+  data?: Record<string, any>
+  name?: string
+  afterUpload?: (response: any) => string | Promise<string>
+  multiple?: boolean
+  ext?: string[]
+  max?: number
+  width?: number
+  height?: number
+  dimension?: {
+    width: number
+    height: number
+  }
+  size?: number
+  hideTips?: boolean
+  disabled?: boolean
+}>(), {
+  method: 'post',
+  headers: () => ({}),
+  data: () => ({}),
+  name: 'file',
+  multiple: false,
+  ext: () => [],
+  max: 1,
+  width: 100,
+  height: 100,
+  size: 5 * 1024 * 1024,
+  hideTips: false,
+  disabled: false,
+})
+
+const emits = defineEmits<{
+  onSuccess: [response: any, file: File]
+}>()
+
+const images = defineModel<string[]>('modelValue', { required: true })
+
+const isUploading = ref(false)
+const uploadProgress = ref(0)
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+
+function onSelectFile(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (!input.files) {
+    return
+  }
+  const selectedFiles = Array.from(input.files)
+  const remain = props.max === 0 ? selectedFiles.length : props.max - images.value.length
+  const filesToAdd: File[] = []
+  for (const file of selectedFiles.slice(0, remain)) {
+    const fileSize = file.size / 1024 / 1024
+    if (fileSize > props.size) {
+      toast.error(`上传图片大小不能超过 ${filesize(props.size, { standard: 'jedec' })}`)
+      return
+    }
+    // 类型校验
+    if (props.ext.length > 0) {
+      const ext = file.name.split('.').pop()?.toLowerCase()
+      if (!props.ext.map(e => e.toLowerCase()).includes(ext || '')) {
+        toast.error(`上传图片只支持 ${props.ext.join(' / ')} 格式`, {
+          description: file.name,
+        })
+        continue
+      }
+    }
+    // 大小校验
+    if (props.size > 0) {
+      if (file.size > props.size) {
+        toast.error(`上传图片大小不能超过 ${filesize(props.size, { standard: 'jedec' })}`, {
+          description: `${file.name} (${filesize(file.size, { standard: 'jedec' })})`,
+        })
+        continue
+      }
+    }
+    filesToAdd.push(file)
+  }
+  fileInputRef.value!.value = ''
+  // 上传每个文件
+  filesToAdd.forEach((file) => {
+    isUploading.value = true
+    uploadProgress.value = 0
+    const formData = new FormData()
+    // 附加额外参数
+    Object.entries(props.data).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+    formData.append(props.name, file)
+    // 处理 headers，确保为普通对象
+    let headersObj: Record<string, any> = {}
+    if (props.headers instanceof Headers) {
+      props.headers.forEach((value, key) => {
+        headersObj[key] = value
+      })
+    }
+    else {
+      headersObj = { ...props.headers }
+    }
+    return axios({
+      url: props.action,
+      method: props.method,
+      headers: headersObj,
+      data: formData,
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+        }
+      },
+    }).then(async (response) => {
+      const url = await props.afterUpload?.(response.data)
+      if (url) {
+        images.value.push(url)
+      }
+      emits('onSuccess', response.data, file)
+    }).finally(() => {
+      isUploading.value = false
+      uploadProgress.value = 0
+    })
+  })
+}
+
+function onRemove(idx: number) {
+  images.value.splice(idx, 1)
+}
+
+function onPreview(index: number) {
+  useFaImagePreview().open(images.value, index)
+}
+
+function onMove(index: number, direction: 'forward' | 'backward') {
+  if (direction === 'forward' && index !== 0) {
+    images.value[index] = images.value.splice(index - 1, 1, images.value[index])[0]
+  }
+  if (direction === 'backward' && index !== images.value.length - 1) {
+    images.value[index] = images.value.splice(index + 1, 1, images.value[index])[0]
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex flex-wrap gap-2">
+      <div
+        v-for="(img, index) in images" :key="img" class="group/image-upload relative flex items-center justify-center overflow-hidden border rounded-lg" :style="{
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+        }"
+      >
+        <img :src="img" class="h-full w-full object-contain">
+        <div v-if="!props.disabled" class="absolute inset-0 grid grid-cols-2 place-items-center rounded-lg bg-black/50 p-2 text-white opacity-0 transition-opacity group-hover/image-upload:opacity-100">
+          <div class="flex-center cursor-pointer opacity-60 transition-all hover:(scale-110 opacity-100)" @click.prevent="onPreview(index)">
+            <FaIcon name="i-icon-park-outline:preview-open" class="size-6" />
+          </div>
+          <div class="flex-center cursor-pointer opacity-60 transition-all hover:(scale-110 opacity-100)" @click.prevent="onRemove(index)">
+            <FaIcon name="i-icon-park-outline:delete" class="size-6" />
+          </div>
+          <div
+            v-show="images.length > 1" :class="cn('flex-center cursor-pointer opacity-60 transition-all', {
+              'hover:(scale-110 opacity-100)': index !== 0,
+              'cursor-not-allowed': index === 0,
+            })" @click="onMove(index, 'forward')"
+          >
+            <FaIcon name="i-icon-park-outline:arrow-circle-left" class="size-6" />
+          </div>
+          <div
+            v-show="images.length > 1" :class="cn('flex-center cursor-pointer opacity-60 transition-all', {
+              'hover:(scale-110 opacity-100)': index !== images.length - 1,
+              'cursor-not-allowed': index === images.length - 1,
+            })" @click="onMove(index, 'backward')"
+          >
+            <FaIcon name="i-icon-park-outline:arrow-circle-right" class="size-6" />
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="images.length < props.max || props.max === 0" class="relative flex-center overflow-hidden bg-transparent" :class="{
+          'cursor-not-allowed': props.disabled || isUploading,
+        }" :style="{
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+        }" :disabled="props.disabled || isUploading" @click="fileInputRef?.click()"
+      >
+        <slot>
+          <div class="size-full flex-center border border-2 rounded-lg border-dashed p-0 text-primary">
+            <FaIcon name="i-icon-park-outline:upload" class="text-2xl text-card-foreground/50" />
+          </div>
+        </slot>
+        <template v-if="isUploading && uploadProgress > 0 && uploadProgress < 100">
+          <FaProgress :model-value="uploadProgress" class="absolute inset-x-1 inset-b-1 h-1 w-auto" />
+        </template>
+        <input ref="fileInputRef" type="file" accept="image/*" :multiple="props.multiple" class="hidden" @change="onSelectFile">
+      </button>
+    </div>
+    <div v-if="!props.hideTips && !props.disabled" class="flex flex-wrap gap-1 text-xs text-card-foreground/50 empty:hidden">
+      <div v-if="props.dimension" class="after:content-[';_'] last:after:content-empty">
+        {{ `建议尺寸为 ${props.dimension?.width}*${props.dimension?.height}` }}
+      </div>
+      <div v-if="props.ext.length > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `支持 ${props.ext.join(' / ')} 格式` }}
+      </div>
+      <div v-if="props.size > 0" class="after:content-[';_'] last:after:content-empty">
+        {{ `大小不超过 ${filesize(props.size, { standard: 'jedec' })}` }}
+      </div>
+      <div v-if="props.max > 1" class="after:content-[';_'] last:after:content-empty">
+        {{ `数量不超过 ${props.max} 个` }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/component_built_in_example/imageupload.vue b/src/views/component_built_in_example/imageupload.vue
new file mode 100644
index 00000000..cf6bc7bd
--- /dev/null
+++ b/src/views/component_built_in_example/imageupload.vue
@@ -0,0 +1,55 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+const files1 = ref<string[]>([])
+const files2 = ref<string[]>(['https://fantastic-admin.hurui.me/logo.svg'])
+const files3 = ref<string[]>([])
+
+function handleSuccess() {
+  toast.success('模拟上传成功')
+}
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="图片上传" description="FaImageUpload" />
+    <FaPageMain>
+      <FaImageUpload
+        v-model="files1"
+        action="/mock/upload/image"
+        :after-upload="(response) => response.data.url"
+        @on-success="handleSuccess"
+      />
+    </FaPageMain>
+    <FaPageMain title="多图上传">
+      <FaImageUpload
+        v-model="files2"
+        action="/mock/upload/image"
+        :after-upload="(response) => response.data.url"
+        :max="2"
+        @on-success="handleSuccess"
+      />
+    </FaPageMain>
+    <FaPageMain title="自定义默认内容、容器大小、建议尺寸、限制类型、不限制数量">
+      <FaImageUpload
+        v-model="files3"
+        action="/mock/upload/image"
+        :after-upload="(response) => response.data.url"
+        :width="200"
+        :height="130"
+        :dimension="{ width: 400, height: 260 }"
+        :ext="['png']"
+        :size="200 * 1024"
+        :max="0"
+        @on-success="handleSuccess"
+      >
+        <FaIcon name="i-noto:identification-card" class="size-50 opacity-50" />
+      </FaImageUpload>
+    </FaPageMain>
+  </div>
+</template>
diff --git a/src/views/component_extend_example/upload.vue b/src/views/component_extend_example/upload.vue
index 28cfe689..ece2bfa4 100755
--- a/src/views/component_extend_example/upload.vue
+++ b/src/views/component_extend_example/upload.vue
@@ -10,12 +10,6 @@ defineOptions({
   name: 'ComponentExampleUpload',
 })
 
-const image = ref('https://picsum.photos/750/450')
-const images = ref([
-  'https://picsum.photos/400',
-  'https://picsum.photos/600',
-  'https://picsum.photos/500',
-])
 const files = ref([
   {
     name: 'Fantastic-admin.svg',
@@ -23,23 +17,7 @@ const files = ref([
   },
 ])
 
-function handleSuccess1(res: any) {
-  if (res.error === '') {
-    image.value = res.data.path
-  }
-  else {
-    toast.warning(res.error)
-  }
-}
-function handleSuccess2(res: any) {
-  if (res.error === '') {
-    images.value.push(res.data.path)
-  }
-  else {
-    toast.warning(res.error)
-  }
-}
-function handleSuccess3(res: any, file: any, fileList: any) {
+function handleSuccess(res: any, file: any, fileList: any) {
   if (res.error === '') {
     files.value.push({
       name: file.name,
@@ -51,41 +29,6 @@ function handleSuccess3(res: any, file: any, fileList: any) {
     toast.warning(res.error)
   }
 }
-
-const tableData = [
-  {
-    image: 'https://picsum.photos/750/450',
-    images: [
-      'https://picsum.photos/400',
-      'https://picsum.photos/600',
-      'https://picsum.photos/500',
-    ],
-  },
-  {
-    image: 'https://picsum.photos/750/450',
-    images: [
-      'https://picsum.photos/400',
-      'https://picsum.photos/600',
-      'https://picsum.photos/500',
-    ],
-  },
-  {
-    image: 'https://picsum.photos/750/450',
-    images: [
-      'https://picsum.photos/400',
-      'https://picsum.photos/600',
-      'https://picsum.photos/500',
-    ],
-  },
-  {
-    image: 'https://picsum.photos/750/450',
-    images: [
-      'https://picsum.photos/400',
-      'https://picsum.photos/600',
-      'https://picsum.photos/500',
-    ],
-  },
-]
 </script>
 
 <template>
@@ -93,36 +36,15 @@ const tableData = [
     <FaPageHeader title="上传">
       <template #description>
         <div class="space-y-2">
-          <p>ImageUpload / ImagesUpload / FileUpload</p>
+          <p>FileUpload</p>
           <p>
             由于线上演示环境开启了 Mock ，会导致上传功能报错，请在本地运行并查看演示
           </p>
         </div>
       </template>
     </FaPageHeader>
-    <FaPageMain title="单图上传">
-      <ImageUpload v-model="image" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" :width="250" :height="150" @on-success="handleSuccess1" />
-    </FaPageMain>
-    <FaPageMain title="多图上传（默认最多3张）">
-      <ImagesUpload v-model="images" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" @on-success="handleSuccess2" />
-    </FaPageMain>
     <FaPageMain title="文件上传（默认最多3个）">
-      <FileUpload :files="files" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/file" @on-success="handleSuccess3" />
-    </FaPageMain>
-    <FaPageMain title="结合 el-table 使用">
-      <ElTable :data="tableData" style="width: 100%;">
-        <ElTableColumn type="index" width="50" fixed="left" />
-        <ElTableColumn label="单张图片">
-          <template #default="{ row }">
-            <ImageUpload v-model:url="row.image" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" :width="250" :height="150" @on-success="handleSuccess1" />
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="多张图片">
-          <template #default="{ row }">
-            <ImagesUpload v-model:url="row.images" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" @on-success="handleSuccess2" />
-          </template>
-        </ElTableColumn>
-      </ElTable>
+      <FileUpload :files="files" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/file" @on-success="handleSuccess" />
     </FaPageMain>
   </div>
 </template>