Upload 上传

上传组件支持图片、视频及混合文件选择，可限制数量、拖拽排序、点击预览与删除，并支持通过插槽自定义条目与触发区。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-upload 的用法，可按需组合。

<template>
  <mu-upload v-model="images" :count="9" accept="image"></mu-upload>
</template>

数量上限

通过 count 设置最大上传数量。

<mu-upload v-model="single" :count="1" accept="image"></mu-upload>

文件类型

通过 accept 设置可选文件类型，支持图片、视频与混合选择。

<mu-upload v-model="medias" :count="6" accept="all"></mu-upload>
<mu-upload v-model="videos" :count="3" accept="video"></mu-upload>

拖拽排序

开启 drag 后可长按拖拽调整文件顺序。

<mu-upload v-model="medias" :count="6" accept="all" :drag="true"></mu-upload>

单选

将 multiple 设为 false 后一次仅能选择一个文件。

<mu-upload v-model="singlePick" :count="3" accept="image" :multiple="false"></mu-upload>

禁止预览

将 preview 设为 false 后点击缩略图不预览。

<mu-upload v-model="noPreview" :count="3" accept="image" :preview="false"></mu-upload>

禁止删除

将 removable 设为 false 后不显示删除按钮。

<mu-upload v-model="noRemove" :count="3" accept="image" :removable="false"></mu-upload>

禁用

开启 disabled 后组件不可操作。

<mu-upload v-model="list" :count="4" accept="image" :disabled="true"></mu-upload>

自定义插槽

通过 default 插槽自定义单个条目内容，通过 trigger 插槽自定义上传触发区。

<mu-upload v-model="list" :count="6" accept="image" :drag="true">
  <template #default="{ item, index }">
    <image style="width:100%;height:100%;" :src="item.url" mode="aspectFill"></image>
    <text>图 {{ index + 1 }}</text>
  </template>
  <template #trigger>
    <view class="trigger">
      <text>+</text>
    </view>
  </template>
</mu-upload>

条目间距

通过 gap 设置条目之间的间距。

<mu-upload v-model="list" :count="3" accept="image" gap="32rpx"></mu-upload>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
modelValue	文件列表，支持 v-model 双向绑定	UploadFile[]	[]
count	最大上传数量	number	9
accept	可选文件类型，可选 image、video、all	string	image
multiple	是否允许一次选择多个	boolean	true
drag	是否开启长按拖拽排序	boolean	false
preview	点击缩略图是否预览	boolean	true
removable	是否显示删除按钮	boolean	true
disabled	是否禁用	boolean	false
itemSize	条目尺寸	string	200rpx
itemRadius	条目圆角	string	16rpx
gap	条目间距	string	16rpx
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
update:modelValue	文件列表变化时触发	value: UploadFile[]
change	文件列表变化时触发	value: UploadFile[]
select	新增文件时触发	value: UploadFile[]
remove	删除文件时触发	index: number
sort	拖拽排序后触发	from: number, to: number
exceed	选择数量超出上限时触发	count: number

插槽

组件支持以下插槽。

名称	说明
default	自定义单个条目内容，作用域参数：item、index、dragging
trigger	自定义上传触发区，作用域参数：count、max

方法

通过 ref 获取组件实例后调用以下方法。

方法名	说明	参数	返回值
choose	主动打开文件选择	-	-
remove	删除指定索引的文件	index: number	-
clear	清空全部文件	-	-

注意事项

• 平台差异：accept="all" 在 Web 平台仅能选择图片，不支持视频混合选择。
• 使用注意：必须使用 v-model 绑定文件数组，元素需含唯一的 key 字段，删除与拖拽排序依赖它。
• 使用注意：达到 count 上限后触发区隐藏，超出部分会触发 exceed。
• 使用注意：choose、remove、clear 需通过 ref 调用；disabled 为 true 时不可添加也不显示删除按钮。