Upload 上传

用于单图/头像替换、多图相册选择、大图全屏预览、上传进度条展示与文件移除的媒体文件上传控件。

---

代码示例

1. 单图头像上传模式 (Avatar Mode)

设置 avatar 开启单图圆形头像替换上传，直接绑定字符串 URL，点击直接选择新图片替换现有头像。

<template>
  <mu-upload v-model="avatarUrl" avatar add-text="更换头像" />
</template>

<script setup>
import { ref } from 'vue'
const avatarUrl = ref('https://example.com/avatar.jpg')
</script>

---

2. 基础多图上传 (Basic)

使用 v-model 绑定文件/图片路径数组，点击加号触发相册或相机选择。

<template>
  <mu-upload v-model="fileList" add-text="上传照片" />
</template>

<script setup>
import { ref } from 'vue'
const fileList = ref(['https://example.com/demo.jpg'])
</script>

---

3. 数量与网格尺寸限制 (Max Count & Size)

使用 max 限制最多选择的图片数量（如 max="3"），使用 size 调节各照片小格子的 rpx 尺寸。

<template>
  <mu-upload v-model="fileList" :max="3" :size="160" add-text="最多3张" />
</template>

---

4. 禁用状态 (Disabled)

设置 disabled 隐藏添加图标按键，禁止修改与删除。

<template>
  <mu-upload v-model="fileList" disabled />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	选中的文件路径字符串(头像模式) 或 路径/对象数组(多图模式)	Array | String	-	[]
avatar	是否开启单图圆形头像替换上传模式	Boolean	true | false	false
max	允许选择的最大文件数量	Number	-	9
size	图片小方块网格尺寸 (rpx)	Number | String	-	150
accept	允许选择的媒体类型	String	image | video | all	'image'
sizeLimit	单文件大小限制 (MB)，超过则触发 oversize 事件	Number	-	0（不限制）
addText	添加上传框内的文字提示	String	-	'上传图片'
disabled	是否禁用上传和删除	Boolean	true | false	false
sourceType	相册或相机来源	Array	['album', 'camera']	['album', 'camera']

---

事件说明 (Events)

事件名	说明	回调参数
change	文件数组/单图发生改变时触发	(value: Array | String)
delete	点击删除某张图片时触发	({ index, item })
oversize	选中文件超过 sizeLimit 大小限制时触发	(file: Object)
update:modelValue	双向绑定更改变	(value: Array | String)
update:value	双向绑定更改变（value 写法兼容）	(value: Array | String)