diff --git a/example/app.mpx b/example/app.mpx
index 31ac28e..3804c4d 100644
--- a/example/app.mpx
+++ b/example/app.mpx
@@ -49,7 +49,8 @@
       "./pages/switch/index",
       "./pages/loading/index",
       "./pages/input/index",
-      "./pages/action-sheet/index"
+      "./pages/action-sheet/index",
+      "./pages/upload/index"
     ]
   }
 </script>
diff --git a/example/common/config.ts b/example/common/config.ts
index 51b4910..1bfaa57 100644
--- a/example/common/config.ts
+++ b/example/common/config.ts
@@ -61,7 +61,8 @@ export default {
           'date-picker',
           'time-picker',
           'rate',
-          'switch'
+          'switch',
+          'upload',
         ]
       },
       {
diff --git a/example/pages/upload/index.mpx b/example/pages/upload/index.mpx
new file mode 100644
index 0000000..99ea107
--- /dev/null
+++ b/example/pages/upload/index.mpx
@@ -0,0 +1,28 @@
+<template>
+  <base-container>
+    <upload transfrom="{{ transfrom }}"></upload>
+  </base-container>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+createPage({
+  methods: {
+    transfrom(res) {
+      console.log('res', res)
+      return res
+    }
+  }
+})
+</script>
+
+<style lang="stylus"></style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index",
+      "upload": "@mpxjs/mpx-cube-ui/src/components/upload/index"
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl b/packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl
new file mode 100644
index 0000000..ecc515f
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl
@@ -0,0 +1 @@
+$upload-background-color := #FFF;
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/lib/components/upload/css.styl b/packages/mpx-cube-ui/lib/components/upload/css.styl
new file mode 100644
index 0000000..b96559d
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/css.styl
@@ -0,0 +1,133 @@
+@require "../../common/stylus/variable.styl"
+@require "../../common/stylus/theme/components/upload.styl";
+.uploader-wrapper
+  display flex
+  flex-wrap wrap
+  gap 20rpx
+.card-container
+  position relative
+.card-container .close-icon
+  display flex
+  align-items center
+  justify-content center
+  position absolute
+  top 10rpx
+  right 10rpx
+  width 24rpx
+  height 24rpx
+  cursor pointer
+.card
+  width 167rpx
+  height 167rpx
+  border-radius 16rpx
+  overflow hidden
+  position relative
+  background-color $var(upload-background-color)
+  box-sizing border-box
+  font-family PingFangSC-Regular
+  font-size 18rpx
+  color #E8C5AA
+  letter-spacing 0
+  text-align center
+  font-weight 400
+.thumb
+  width 100%
+  height 100%
+  object-fit cover
+.preview-icon
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+  display flex
+  align-items center
+  justify-content center
+  background-color rgba(0, 0, 0, 0.5)
+  color #fff
+  font-size 24rpx
+  padding 4rpx 8rpx
+  border-radius 8rpx
+  opacity 0
+  transition opacity 0.2s
+.uploading
+  position absolute
+  top 0
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  background-color rgba(0, 0, 0, 0.5)
+.uploading-text
+  margin-bottom 10rpx
+@keyframes spin
+  0%
+    transform rotate(0deg)
+  100%
+    transform rotate(360deg)
+.progress
+  width 30rpx
+  height 30rpx
+  margin-bottom 7rpx
+  &.loading
+    animation spin 1s linear infinite
+.progress-bar
+  height 100%
+  background-color #3b82f6
+  transition width 0.3s
+.upload-btn
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  border-style dashed
+  border-color #cbd5e1
+  color #666
+.plus
+  width 30rpx
+  height 30rpx
+.text
+  font-size 22rpx
+.error
+  position absolute
+  top 0
+  display flex
+  align-content center
+  justify-content center
+  flex-direction column
+.error-icon
+  font-size 30rpx
+  margin-bottom 5rpx
+.preview-mask
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background-color rgba(0, 0, 0, 0.9)
+  z-index 999
+  display flex
+  align-items center
+  justify-content center
+  .close-icon
+    position absolute
+    top 114rpx
+    left 32rpx
+    width 36rpx
+    height 36rpx
+  .indicator
+    position absolute
+    top 114rpx
+    left 50%
+    transform translateX(-50%)
+    color #fff
+    font-size 24rpx
+.preview-img
+  width 100%
+  height 60%
+  border-radius 12rpx
+.mpx-image
+  width 100%
+  height 100%
+  background-size contain
+  background-repeat no-repeat
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/lib/components/upload/hooks.js b/packages/mpx-cube-ui/lib/components/upload/hooks.js
new file mode 100644
index 0000000..3862738
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/hooks.js
@@ -0,0 +1,19 @@
+import { onUnmounted, ref } from "@mpxjs/core";
+// 节流hooks
+export const useDebounceFn = (fn, delay) => {
+    const timer = ref();
+    onUnmounted(() => {
+        clearTimeout(timer.value);
+    });
+    return {
+        run: (...args) => {
+            if (timer.value) {
+                clearTimeout(timer.value);
+            }
+            timer.value = setTimeout(() => {
+                fn(...args);
+                timer.value = undefined;
+            }, delay);
+        }
+    };
+};
diff --git a/packages/mpx-cube-ui/lib/components/upload/index.mpx b/packages/mpx-cube-ui/lib/components/upload/index.mpx
new file mode 100644
index 0000000..345ba6e
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/index.mpx
@@ -0,0 +1,427 @@
+<template>
+  <view class="uploader-wrapper">
+    <view
+      class="card-container"
+      wx:if="{{ fileList.length !== 0}}"
+      wx:for="{{fileList}}"
+      wx:for-index="index"
+      wx:key="url"
+    >
+      <view class="card" bindtap="handlePreview(index)">
+        <image class="thumb" src="{{item.localUrl}}" mode="aspectFill" />
+      </view>
+
+      <!-- 上传中 -->
+      <view class="card uploading" wx:if="{{item.status === 'loading'}}">
+        <view class="progress" wx:class="{{ {loading: item.status === 'loading'} }}">
+          <image
+            src="https://ut-static.udache.com/webx/fe-agility-wyc/fRJCJq6UtOafATtuavoX7.png"
+            mode="acceptFit"
+          ></image>
+        </view>
+        <view class="uploading-text">上传中...</view>
+      </view>
+
+      <!-- 上传失败 -->
+      <view class="card error" wx:if="{{item.status === 'error'}}">
+        <view class="error-text">失败</view>
+        <view class="error-text">删除重试</view>
+      </view>
+
+      <view class="close-icon" bindtap="deleteFile(index)" wx:if="{{ item.status !== 'loading' }}">
+        <image
+          src="https://ut-static.udache.com/webx/fe-agility-wyc/xN_BTbAz3c7k4hRFV449M.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+
+    <!-- 上传按钮 -->
+    <view class="card upload-btn" bindtap="uploadFiles" wx:if="{{ showUploadBtn  }}">
+      <view class="plus">
+        <image
+          src="https://ut-static.udache.com/webx/fe-agility-wyc/lOYoYTdQAbjwZaUAfJh0c.png"
+          mode="acceptFit"
+        ></image>
+      </view>
+    </view>
+  </view>
+
+  <!--web 大图预览 -->
+  <view
+    wx:if="{{previewVisible}}"
+    class="preview-mask"
+    bindtouchmove="handleTouchMove"
+    bindtouchstart="handleTouchStart"
+  >
+    <view class="close-icon" catchtap="closePreview">
+      <image
+        src="https://ut-static.udache.com/webx/fe-agility-wyc/7K1lcW8ECfpdYv93a1__4.png"
+        mode="acceptFit"
+      />
+    </view>
+    <view class="indicator"> {{ previewIdx }} / {{ fileList.length }} </view>
+    <view class="preview-img">
+      <image wx:ref="imgRef" src="{{previewUrl}}" mode="aspectFit" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import mpx, { ref, computed, onUnmounted } from '@mpxjs/core'
+import { useDebounceFn } from './hooks'
+import { transformRes } from "./utils";
+
+interface Props {
+  /**
+   * 上传文件的最大数量
+   */
+  maxLength?: number
+  /**
+   * 上传文件的地址
+   */
+  url?: string
+  /**
+   * 是否禁用上传
+   */
+  disabled?: boolean
+  /**
+   * 上传文件的额外参数
+   */
+  data?: {
+    [key: string]: any
+  },
+  /**
+   * 支持数据转换
+   */
+  transform?: {
+    errno: string
+    imgHttp: string
+  }
+}
+
+const context = useContext()
+
+const props = withDefaults(defineProps<Props>(), {
+  transform: {
+    errno: 'errno',
+    imgHttp: 'data.file_download_https'
+  }
+})
+
+/** 文件选择逻辑 */
+interface FileInfo extends File{
+  path?: string
+}
+interface UploadFile {
+  file: FileInfo
+  url: string
+  localUrl: string
+  status: 'waiting' | 'loading' | 'success' | 'error'
+}
+const fileList = ref<UploadFile[]>([]) // 选择的文件列表
+const uploading = ref(false)
+// 剩余可上传的数量
+const availableUploadCount = computed(() => {
+  if (props.maxLength) { return props.maxLength - fileList.value.length }
+})
+
+const chooseImageWxAndAli = (): Promise<Array<any>> => {
+  return new Promise((resolve, reject) => {
+    mpx.chooseImage({
+      count: props.maxLength ? availableUploadCount.value : undefined, // 限制选择的图片数量
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: (res) => {
+        console.log('选择的图片:', res.tempFiles)
+        resolve(res.tempFiles)
+      },
+      fail: (err) => {
+        reject(err)
+        mpx.showToast({
+          title: '选择图片失败',
+          icon: 'error'
+        })
+      }
+    })
+  })
+}
+
+const chooseImageWeb = (): Promise<Array<any>> => {
+  return new Promise((resolve, reject) => {
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.accept = 'image/*'
+    fileInput.multiple = true
+    fileInput.style.display = 'none'
+    document.body.appendChild(fileInput)
+
+    fileInput.onchange = () => {
+      let files = fileInput.files ? Array.from(fileInput.files) : []
+      if (props.maxLength && files.length > availableUploadCount.value!) {
+        mpx.showToast({
+          title: `最多只能上传 ${props.maxLength} 张图片`,
+          duration: 3000,
+          icon: 'error'
+        })
+
+        files = files.slice(0, props.maxLength - fileList.value.length)
+      }
+
+      if (files.length > 0) {
+        resolve(files)
+      } else {
+        reject(new Error('No files selected'))
+      }
+
+      // 清理
+      document.body.removeChild(fileInput)
+    }
+    fileInput.click()
+  })
+}
+
+const chooseImage = async () => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      return await chooseImageWxAndAli()
+    case 'web':
+      return await chooseImageWeb()
+    default:
+      console.error('Unsupported environment:', __mpx_mode__)
+  }
+}
+
+// 服务接口调用
+const postFiles = async (url, file): Promise<any> => {
+  if (!url) return
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali': {
+      // 这里可以调用实际的上传接口
+      return new Promise((resolve, reject) => {
+        mpx.uploadFile({
+          url, // 开发者服务器 url
+          filePath: file.path, // 要上传文件资源的路径
+          name: 'name', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
+          formData: {}, // 上传文件的其他信息
+          success: (res) => {
+            resolve(transformRes(res, props.transform))
+          },
+          fail: () => {
+            reject(new Error('上传失败'))
+          },
+          complete: () => {}
+        })
+      })
+    }
+    case 'web': {
+      return new Promise(async (resolve, reject) => {
+        const formData = new FormData()
+        const params = {
+          file,
+          ...props.data
+        }
+        for (const key in params) {
+          formData.append(key, params[key])
+        }
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          body: formData
+        }).then(res => res.json())
+        resolve(transformRes(res, props.transform))
+      })
+    }
+    default:
+      console.error('Unsupported environment for file upload:', __mpx_mode__)
+      return Promise.reject(new Error('Unsupported environment'))
+  }
+}
+
+const uploadFiles = async () => {
+  if (props.disabled) return
+  let unUploadedFiles = await chooseImage()
+  if (!unUploadedFiles) return
+  unUploadedFiles = unUploadedFiles.map((file) => {
+    return {
+      file,
+      localUrl: createPreviewUrl(file),
+      status: 'waiting' // 初始状态为等待上传
+    }
+  })
+  fileList.value.push(...unUploadedFiles)
+
+  if (props.url && props.url.length > 0) {
+    const diffCount = fileList.value.length - unUploadedFiles.length
+    uploading.value = true
+    // loading 状态
+    for (let i = 0; i < unUploadedFiles.length; i++) {
+      fileList.value[i + diffCount].status = 'loading'
+    }
+
+    console.log('loading')
+    const tasks = unUploadedFiles.map((file) => postFiles(props.url, file.file))
+    const result = await Promise.allSettled(tasks)
+    console.log('result:', result)
+
+    // success\error 状态
+    for (let i = 0; i < unUploadedFiles.length; i++) {
+      const item = result[i]
+
+      if (item.status === 'fulfilled' && item.value.errno === 0) {
+        fileList.value[i + diffCount].status = 'success'
+        fileList.value[i + diffCount].url = item.value.imgHttp
+      } else {
+        fileList.value[i + diffCount].status = 'error'
+      }
+    }
+    uploading.value = false
+  }
+  context.triggerEvent('filechange', { files: [...fileList.value] })
+}
+
+/** 本地preview */
+const createPreviewUrl = (file) => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      return file.path
+    case 'web':
+      return URL.createObjectURL(file)
+    default:
+      console.error('Unsupported environment for preview:', __mpx_mode__)
+      return ''
+  }
+}
+
+const deleteFile = (index) => {
+  fileList.value.splice(index, 1)
+  context.triggerEvent('filechange', { files: [...fileList.value] })
+}
+
+/** 大图预览 */
+const previewVisible = ref(false)
+const previewIdx = ref(1)
+
+let startDist = 0
+let startScale = 1
+let currentScale = 1
+
+let startX = 0 // 左右滑动
+let currentX = 0 // 左右滑动
+
+const getDistance = (touches) => {
+  const [touch1, touch2] = touches
+  const dx = touch2.clientX - touch1.clientX
+  const dy = touch2.clientY - touch1.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+const handleTouchStart = (e) => {
+  if (e.touches.length === 2) {
+    e.preventDefault()
+    startDist = getDistance(e.touches)
+    startScale = currentScale
+  } else if (e.touches.length === 1) {
+    startX = e.touches[0].clientX
+  }
+}
+
+// 左右滑动
+const { run: exceSlide } = useDebounceFn((e) => {
+  currentX = e.touches[0].clientX
+  const threshold = 50 // 最小滑动距离阈值，避免轻轻滑动也切换
+  if (Math.abs(currentX - startX) < threshold) return
+  const direction = currentX - startX < 0 ? 'left' : 'right'
+  if (direction === 'left') {
+    const newIdx = previewIdx.value + 1
+    if (newIdx <= fileList.value.length) previewIdx.value = newIdx
+  } else if (direction === 'right') {
+    const newIdx = previewIdx.value - 1
+    if (newIdx > 0) previewIdx.value = newIdx
+  }
+}, 100)
+const handleTouchMove = (e) => {
+  if (e.touches.length === 2) {
+    e.preventDefault()
+    const newDist = getDistance(e.touches)
+    const scaleDelta = newDist / startDist
+    currentScale = Math.min(4, Math.max(0.5, startScale * scaleDelta)) // 限制 0.5~4 倍缩放
+    context.refs.imgRef._selector.style.transform = `scale(${currentScale})`
+  } else if (e.touches.length === 1) {
+    exceSlide(e)
+  }
+}
+
+const handlePreview = (index) => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      previewIdx.value = index + 1
+      mpx.previewImage({
+        current: previewUrl.value,
+        urls: [previewUrl.value]
+      })
+      break
+    case 'web':
+      previewVisible.value = true
+      previewIdx.value = index + 1
+      document.body.style.overflow = 'hidden' // 锁住后方背景滚动
+      break
+    default:
+      console.error('Unsupported environment for preview:', __mpx_mode__)
+  }
+}
+
+const previewUrl = computed(() => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      return fileList.value[previewIdx.value - 1].file.path!
+    case 'web':
+      return fileList.value[previewIdx.value - 1].localUrl!
+    default:
+      console.error('Unsupported environment for preview:', __mpx_mode__)
+      return ''
+  }
+})
+
+const showUploadBtn = computed(() => props.maxLength ? !uploading.value && fileList.value.length < props.maxLength : true)
+
+function closePreview() {
+  previewVisible.value = false
+  document.body.style.overflow = 'auto'
+}
+
+// 组件销毁时清除 URL.createObjectURL 创建的对象，释放内存
+onUnmounted(() => {
+  if (__mpx_mode__ === 'web') {
+    fileList.value.forEach((file) => {
+      URL.revokeObjectURL(file.url)
+    })
+  }
+})
+
+defineExpose({
+  fileList,
+  previewVisible,
+  previewUrl,
+  closePreview,
+  handlePreview,
+  deleteFile,
+  uploadFiles,
+  handleTouchStart,
+  handleTouchMove,
+  uploading,
+  showUploadBtn,
+  previewIdx
+})
+</script>
+
+<style lang="stylus" scoped>
+@require './css.styl'
+</style>
diff --git a/packages/mpx-cube-ui/lib/components/upload/utils.js b/packages/mpx-cube-ui/lib/components/upload/utils.js
new file mode 100644
index 0000000..64593f5
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/utils.js
@@ -0,0 +1,16 @@
+export function getByPath(obj, path) {
+    return path.split('.').reduce((prev, curr) => prev && prev[curr], obj);
+}
+/**
+ * 对请求的返回结构做目标转化
+ * @param source
+ * @param target
+ * @returns
+ */
+export function transformRes(source, target) {
+    target = { ...target };
+    for (const key in target) {
+        target[key] = getByPath(source, target[key]);
+    }
+    return target;
+}
diff --git a/packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl b/packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl
new file mode 100644
index 0000000..ecc515f
--- /dev/null
+++ b/packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl
@@ -0,0 +1 @@
+$upload-background-color := #FFF;
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/src/components/upload/css.styl b/packages/mpx-cube-ui/src/components/upload/css.styl
new file mode 100644
index 0000000..b96559d
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/css.styl
@@ -0,0 +1,133 @@
+@require "../../common/stylus/variable.styl"
+@require "../../common/stylus/theme/components/upload.styl";
+.uploader-wrapper
+  display flex
+  flex-wrap wrap
+  gap 20rpx
+.card-container
+  position relative
+.card-container .close-icon
+  display flex
+  align-items center
+  justify-content center
+  position absolute
+  top 10rpx
+  right 10rpx
+  width 24rpx
+  height 24rpx
+  cursor pointer
+.card
+  width 167rpx
+  height 167rpx
+  border-radius 16rpx
+  overflow hidden
+  position relative
+  background-color $var(upload-background-color)
+  box-sizing border-box
+  font-family PingFangSC-Regular
+  font-size 18rpx
+  color #E8C5AA
+  letter-spacing 0
+  text-align center
+  font-weight 400
+.thumb
+  width 100%
+  height 100%
+  object-fit cover
+.preview-icon
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+  display flex
+  align-items center
+  justify-content center
+  background-color rgba(0, 0, 0, 0.5)
+  color #fff
+  font-size 24rpx
+  padding 4rpx 8rpx
+  border-radius 8rpx
+  opacity 0
+  transition opacity 0.2s
+.uploading
+  position absolute
+  top 0
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  background-color rgba(0, 0, 0, 0.5)
+.uploading-text
+  margin-bottom 10rpx
+@keyframes spin
+  0%
+    transform rotate(0deg)
+  100%
+    transform rotate(360deg)
+.progress
+  width 30rpx
+  height 30rpx
+  margin-bottom 7rpx
+  &.loading
+    animation spin 1s linear infinite
+.progress-bar
+  height 100%
+  background-color #3b82f6
+  transition width 0.3s
+.upload-btn
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  border-style dashed
+  border-color #cbd5e1
+  color #666
+.plus
+  width 30rpx
+  height 30rpx
+.text
+  font-size 22rpx
+.error
+  position absolute
+  top 0
+  display flex
+  align-content center
+  justify-content center
+  flex-direction column
+.error-icon
+  font-size 30rpx
+  margin-bottom 5rpx
+.preview-mask
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background-color rgba(0, 0, 0, 0.9)
+  z-index 999
+  display flex
+  align-items center
+  justify-content center
+  .close-icon
+    position absolute
+    top 114rpx
+    left 32rpx
+    width 36rpx
+    height 36rpx
+  .indicator
+    position absolute
+    top 114rpx
+    left 50%
+    transform translateX(-50%)
+    color #fff
+    font-size 24rpx
+.preview-img
+  width 100%
+  height 60%
+  border-radius 12rpx
+.mpx-image
+  width 100%
+  height 100%
+  background-size contain
+  background-repeat no-repeat
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/src/components/upload/hooks.ts b/packages/mpx-cube-ui/src/components/upload/hooks.ts
new file mode 100644
index 0000000..045235e
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/hooks.ts
@@ -0,0 +1,21 @@
+import { onUnmounted, ref } from '@mpxjs/core'
+
+// 节流hooks
+export const useDebounceFn = (fn, delay) => {
+  const timer = ref<NodeJS.Timeout>()
+
+  onUnmounted(() => {
+    clearTimeout(timer.value)
+  })
+  return {
+    run: (...args) => {
+      if (timer.value) {
+        clearTimeout(timer.value)
+      }
+      timer.value = setTimeout(() => {
+        fn(...args)
+        timer.value = undefined
+      }, delay)
+    }
+  }
+}
diff --git a/packages/mpx-cube-ui/src/components/upload/index.mpx b/packages/mpx-cube-ui/src/components/upload/index.mpx
new file mode 100644
index 0000000..c3a5dd2
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/index.mpx
@@ -0,0 +1,431 @@
+<template>
+  <view class="uploader-wrapper">
+    <view
+      class="card-container"
+      wx:if="{{ fileList.length !== 0}}"
+      wx:for="{{fileList}}"
+      wx:for-index="index"
+      wx:key="url"
+    >
+      <view class="card" bindtap="handlePreview(index)">
+        <image class="thumb" src="{{item.localUrl}}" mode="aspectFill" />
+      </view>
+
+      <!-- 上传中 -->
+      <view class="card uploading" wx:if="{{item.status === 'loading'}}">
+        <view class="progress" wx:class="{{ {loading: item.status === 'loading'} }}">
+          <image
+            src="https://ut-static.udache.com/webx/fe-agility-wyc/fRJCJq6UtOafATtuavoX7.png"
+            mode="acceptFit"
+          ></image>
+        </view>
+        <view class="uploading-text">上传中...</view>
+      </view>
+
+      <!-- 上传失败 -->
+      <view class="card error" wx:if="{{item.status === 'error'}}">
+        <view class="error-text">失败</view>
+        <view class="error-text">删除重试</view>
+      </view>
+
+      <view class="close-icon" bindtap="deleteFile(index)" wx:if="{{ item.status !== 'loading' }}">
+        <image
+          src="https://ut-static.udache.com/webx/fe-agility-wyc/xN_BTbAz3c7k4hRFV449M.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+
+    <!-- 上传按钮 -->
+    <view class="card upload-btn" bindtap="uploadFiles" wx:if="{{ showUploadBtn  }}">
+      <view class="plus">
+        <image
+          src="https://ut-static.udache.com/webx/fe-agility-wyc/lOYoYTdQAbjwZaUAfJh0c.png"
+          mode="acceptFit"
+        ></image>
+      </view>
+    </view>
+  </view>
+
+  <!--web 大图预览 -->
+  <view
+    wx:if="{{previewVisible}}"
+    class="preview-mask"
+    bindtouchmove="handleTouchMove"
+    bindtouchstart="handleTouchStart"
+  >
+    <view class="close-icon" catchtap="closePreview">
+      <image
+        src="https://ut-static.udache.com/webx/fe-agility-wyc/7K1lcW8ECfpdYv93a1__4.png"
+        mode="acceptFit"
+      />
+    </view>
+    <view class="indicator"> {{ previewIdx }} / {{ fileList.length }} </view>
+    <view class="preview-img">
+      <image wx:ref="imgRef" src="{{previewUrl}}" mode="aspectFit" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import mpx, { ref, computed, onUnmounted } from '@mpxjs/core'
+import { useDebounceFn } from './hooks'
+import { transformRes } from './utils'
+
+interface Props {
+  /**
+   * 上传文件的最大数量
+   */
+  maxLength?: number
+  /**
+   * 上传文件的地址
+   */
+  url?: string
+  /**
+   * 是否禁用上传
+   */
+  disabled?: boolean
+  /**
+   * 上传文件的额外参数
+   */
+  data?: {
+    [key: string]: any
+  },
+  /**
+   * 支持数据转换
+   */
+  transform?: {
+    errno: string
+    imgHttp: string
+  }
+}
+
+const context = useContext()
+
+const props = withDefaults(defineProps<Props>(), {
+  transform: {
+    errno: 'errno',
+    imgHttp: 'data.file_download_https'
+  }
+})
+
+/** 文件选择逻辑 */
+interface FileInfo extends File{
+  path?: string
+}
+interface UploadFile {
+  file: FileInfo
+  url: string
+  localUrl: string
+  status: 'waiting' | 'loading' | 'success' | 'error'
+}
+const fileList = ref<UploadFile[]>([]) // 选择的文件列表
+const uploading = ref(false)
+// 剩余可上传的数量
+const availableUploadCount = computed(() => {
+  if (props.maxLength) { return props.maxLength - fileList.value.length }
+})
+
+const chooseImageWxAndAli = (): Promise<Array<any>> => {
+  return new Promise((resolve, reject) => {
+    mpx.chooseImage({
+      count: props.maxLength ? availableUploadCount.value : undefined, // 限制选择的图片数量
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: (res) => {
+        console.log('选择的图片:', res.tempFiles)
+        resolve(res.tempFiles)
+      },
+      fail: (err) => {
+        reject(err)
+        mpx.showToast({
+          title: '选择图片失败',
+          icon: 'error'
+        })
+      }
+    })
+  })
+}
+
+const chooseImageWeb = (): Promise<Array<any>> => {
+  return new Promise((resolve, reject) => {
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.accept = 'image/*'
+    fileInput.multiple = true
+    fileInput.style.display = 'none'
+    document.body.appendChild(fileInput)
+
+    fileInput.onchange = () => {
+      let files = fileInput.files ? Array.from(fileInput.files) : []
+      if (props.maxLength && files.length > availableUploadCount.value!) {
+        mpx.showToast({
+          title: `最多只能上传 ${props.maxLength} 张图片`,
+          duration: 3000,
+          icon: 'error'
+        })
+
+        files = files.slice(0, props.maxLength - fileList.value.length)
+      }
+
+      if (files.length > 0) {
+        resolve(files)
+      } else {
+        reject(new Error('No files selected'))
+      }
+
+      // 清理
+      document.body.removeChild(fileInput)
+    }
+    fileInput.click()
+  })
+}
+
+const chooseImage = async () => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      return await chooseImageWxAndAli()
+    case 'web':
+      return await chooseImageWeb()
+    default:
+      console.error('Unsupported environment:', __mpx_mode__)
+      return Promise.reject(new Error('Unsupported environment'))
+  }
+}
+
+// 服务接口调用
+const postFiles = async (url, file): Promise<any> => {
+  if (!url) return
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali': {
+      // 这里可以调用实际的上传接口
+      return new Promise((resolve, reject) => {
+        mpx.uploadFile({
+          url, // 开发者服务器 url
+          filePath: file.path, // 要上传文件资源的路径
+          name: 'name', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
+          formData: {}, // 上传文件的其他信息
+          success: (res) => {
+            resolve(transformRes(res, props.transform))
+          },
+          fail: () => {
+            reject(new Error('上传失败'))
+          },
+          complete: () => {}
+        })
+      })
+    }
+    case 'web': {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData()
+        const params = {
+          file,
+          ...props.data
+        }
+        for (const key in params) {
+          formData.append(key, params[key])
+        }
+        fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          body: formData
+        }).then(res => res.json())
+          .then(res => resolve(transformRes(res, props.transform)))
+          .catch(err => {
+            reject(err)
+          })
+      })
+    }
+    default:
+      console.error('Unsupported environment for file upload:', __mpx_mode__)
+      return Promise.reject(new Error('Unsupported environment'))
+  }
+}
+
+const uploadFiles = async () => {
+  if (props.disabled) return
+  let unUploadedFiles = await chooseImage()
+  if (!unUploadedFiles) return
+  unUploadedFiles = unUploadedFiles.map((file) => {
+    return {
+      file,
+      localUrl: createPreviewUrl(file),
+      status: 'waiting' // 初始状态为等待上传
+    }
+  })
+  fileList.value.push(...unUploadedFiles)
+
+  if (props.url && props.url.length > 0) {
+    const diffCount = fileList.value.length - unUploadedFiles.length
+    uploading.value = true
+    // loading 状态
+    for (let i = 0; i < unUploadedFiles.length; i++) {
+      fileList.value[i + diffCount].status = 'loading'
+    }
+
+    console.log('loading')
+    const tasks = unUploadedFiles.map((file) => postFiles(props.url, file.file))
+    const result = await Promise.allSettled(tasks)
+    console.log('result:', result)
+
+    // success\error 状态
+    for (let i = 0; i < unUploadedFiles.length; i++) {
+      const item = result[i]
+
+      if (item.status === 'fulfilled' && item.value.errno === 0) {
+        fileList.value[i + diffCount].status = 'success'
+        fileList.value[i + diffCount].url = item.value.imgHttp
+      } else {
+        fileList.value[i + diffCount].status = 'error'
+      }
+    }
+    uploading.value = false
+  }
+  context.triggerEvent('filechange', { files: [...fileList.value] })
+}
+
+/** 本地preview */
+const createPreviewUrl = (file) => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      return file.path
+    case 'web':
+      return URL.createObjectURL(file)
+    default:
+      console.error('Unsupported environment for preview:', __mpx_mode__)
+      return ''
+  }
+}
+
+const deleteFile = (index) => {
+  fileList.value.splice(index, 1)
+  context.triggerEvent('filechange', { files: [...fileList.value] })
+}
+
+/** 大图预览 */
+const previewVisible = ref(false)
+const previewIdx = ref(1)
+
+let startDist = 0
+let startScale = 1
+let currentScale = 1
+
+let startX = 0 // 左右滑动
+let currentX = 0 // 左右滑动
+
+const getDistance = (touches) => {
+  const [touch1, touch2] = touches
+  const dx = touch2.clientX - touch1.clientX
+  const dy = touch2.clientY - touch1.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+const handleTouchStart = (e) => {
+  if (e.touches.length === 2) {
+    e.preventDefault()
+    startDist = getDistance(e.touches)
+    startScale = currentScale
+  } else if (e.touches.length === 1) {
+    startX = e.touches[0].clientX
+  }
+}
+
+// 左右滑动
+const { run: exceSlide } = useDebounceFn((e) => {
+  currentX = e.touches[0].clientX
+  const threshold = 50 // 最小滑动距离阈值，避免轻轻滑动也切换
+  if (Math.abs(currentX - startX) < threshold) return
+  const direction = currentX - startX < 0 ? 'left' : 'right'
+  if (direction === 'left') {
+    const newIdx = previewIdx.value + 1
+    if (newIdx <= fileList.value.length) previewIdx.value = newIdx
+  } else if (direction === 'right') {
+    const newIdx = previewIdx.value - 1
+    if (newIdx > 0) previewIdx.value = newIdx
+  }
+}, 100)
+const handleTouchMove = (e) => {
+  if (e.touches.length === 2) {
+    e.preventDefault()
+    const newDist = getDistance(e.touches)
+    const scaleDelta = newDist / startDist
+    currentScale = Math.min(4, Math.max(0.5, startScale * scaleDelta)) // 限制 0.5~4 倍缩放
+    context.refs.imgRef._selector.style.transform = `scale(${currentScale})`
+  } else if (e.touches.length === 1) {
+    exceSlide(e)
+  }
+}
+
+const handlePreview = (index) => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      previewIdx.value = index + 1
+      mpx.previewImage({
+        current: previewUrl.value,
+        urls: [previewUrl.value]
+      })
+      break
+    case 'web':
+      previewVisible.value = true
+      previewIdx.value = index + 1
+      document.body.style.overflow = 'hidden' // 锁住后方背景滚动
+      break
+    default:
+      console.error('Unsupported environment for preview:', __mpx_mode__)
+  }
+}
+
+const previewUrl = computed(() => {
+  switch (__mpx_mode__) {
+    case 'wx':
+    case 'ali':
+      return fileList.value[previewIdx.value - 1].file.path!
+    case 'web':
+      return fileList.value[previewIdx.value - 1].localUrl!
+    default:
+      console.error('Unsupported environment for preview:', __mpx_mode__)
+      return ''
+  }
+})
+
+const showUploadBtn = computed(() => props.maxLength ? !uploading.value && fileList.value.length < props.maxLength : true)
+
+function closePreview() {
+  previewVisible.value = false
+  document.body.style.overflow = 'auto'
+}
+
+// 组件销毁时清除 URL.createObjectURL 创建的对象，释放内存
+onUnmounted(() => {
+  if (__mpx_mode__ === 'web') {
+    fileList.value.forEach((file) => {
+      URL.revokeObjectURL(file.url)
+    })
+  }
+})
+
+defineExpose({
+  fileList,
+  previewVisible,
+  previewUrl,
+  closePreview,
+  handlePreview,
+  deleteFile,
+  uploadFiles,
+  handleTouchStart,
+  handleTouchMove,
+  uploading,
+  showUploadBtn,
+  previewIdx
+})
+</script>
+
+<style lang="stylus" scoped>
+@require './css.styl'
+</style>
diff --git a/packages/mpx-cube-ui/src/components/upload/utils.ts b/packages/mpx-cube-ui/src/components/upload/utils.ts
new file mode 100644
index 0000000..4893e56
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/utils.ts
@@ -0,0 +1,36 @@
+/**
+ * 根据 path 获取对象数据
+ */
+type Prev = [never, 0, 1, 2, 3, 4, 5]
+type Join<T, P> = T extends string | number ? P extends string | number ? `${T}.${P}` : never : never
+type Paths<T, Depth extends number = 3> =
+  Depth extends never ?
+    never
+    : T extends object
+      ? {
+          [K in keyof T & (string | number)]:
+            T[K] extends object
+              ? `${K}` | Join<K, Paths<T[K], Prev[Depth]>>
+              : `${K}`
+        }[keyof T & (string | number)]
+      : never
+
+export function getByPath<T, K extends string & Paths<T>>(obj: T, path: K) {
+  return path.split('.').reduce((prev, curr) => prev && prev[curr], obj)
+}
+
+/**
+ * 对请求的返回结构做目标转化
+ * @param source
+ * @param target
+ * @returns
+ */
+export function transformRes(source, target) {
+  target = { ...target }
+  const result = {}
+  for (const key in target) {
+    const path = target[key]
+    result[key] = getByPath(source, path)
+  }
+  return result
+}
diff --git a/packages/website-build/src/compiler/compile-src-code-md.ts b/packages/website-build/src/compiler/compile-src-code-md.ts
index 86f4833..d925c1c 100644
--- a/packages/website-build/src/compiler/compile-src-code-md.ts
+++ b/packages/website-build/src/compiler/compile-src-code-md.ts
@@ -9,6 +9,29 @@ import { parser } from '@mpxjs/vuese-parser'
 import { Render } from '@mpxjs/vuese-markdown-render'
 import { renderOptions } from '../common/options.js'
 
+/**
+ * 将字符串的对象转为可读的markdown格式
+ * @param str
+ * @returns
+ */
+export function convertObjectStringToMarkdownHtml(str) {
+  if (!str) return
+  return (
+    '<pre><code>' +
+    str
+      .split('\n')
+      .map((line, idx) => {
+        // 第一行和最后一行是{}，将括号的前后空白字符去除，只保留属性的
+        if (!(idx !== 0 && idx !== str.split('\n').length - 1)) {
+          line = line.replace(/\s+/g, '').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        }
+        return line
+      }) // 防止HTML标签注入
+      .join('<br>') +
+    '</code></pre>'
+  )
+}
+
 /**
  * 解析 cube-ui src 文件夹下的组件，生成md文档
  *
@@ -44,6 +67,9 @@ const genSrcCodeMd = function (srcDir: string, component: string, fnMixins) {
     item.type = item.type.replace(/\n/g, '<br>')
     item.type = item.type.replace(new RegExp(optionalMark, 'g'), '?')
   })
+  text.props?.forEach(item => {
+    item.default = convertObjectStringToMarkdownHtml(item.default)
+  })
   const render = new Render(text, Object.assign({
     name: component
   } as any, renderOptions))