NUR

主题

Upload 上传 ​

通过点击或者拖拽上传文件。

基础用法 ​

点击或拖拽上传
vue
<my-upload v-model:file-list="files" @change="handleChange" />

图片墙 ​

list-type="picture-card" 以卡片网格方式展示已上传图片。

+
vue
<my-upload v-model:file-list="files" list-type="picture-card" accept="image/*" multiple :limit="6" />

用户头像 ​

:limit="1" 限制只上传一个文件，新文件会覆盖旧文件。效果如下：

+
上传新头像（仅限一张，覆盖旧图）
vue
<my-upload v-model:file-list="files" list-type="picture-card" accept="image/*" :limit="1" />

图片列表缩略图 ​

list-type="picture" 以列表方式展示，每项带缩略图。

点击或拖拽上传
vue
<my-upload v-model:file-list="files" list-type="picture" accept="image/*" multiple />

自定义缩略图 ​

通过 #thumbnail 插槽自定义缩略图显示。

点击或拖拽上传
vue
<my-upload v-model:file-list="files" list-type="picture">
  <template #thumbnail="{ file }">
    <div>{{ file.type.startsWith('image/') ? '🖼' : '📄' }}</div>
  </template>
</my-upload>

覆盖前一个文件 ​

:limit="1" 且不设置 multiple 时，新上传的文件会替换旧文件。

点击或拖拽上传
vue
<my-upload v-model:file-list="files" :limit="1" />

上传文件列表控制 ​

show-file-list 控制是否显示文件列表，v-model:file-list 双向绑定文件列表。

点击或拖拽上传
vue
<my-upload v-model:file-list="files" :show-file-list="false" />

拖拽上传 ​

拖拽文件到上传区域即可上传，拖入时有视觉反馈。

将文件拖拽到此处
vue
<my-upload v-model:file-list="files">
  <template #trigger>
    <div>将文件拖拽到此处</div>
  </template>
</my-upload>

上传目录 ​

directory 允许上传整个文件夹。

点击或拖拽上传
vue
<my-upload v-model:file-list="files" directory multiple />

手动上传 ​

auto-upload="false" 关闭自动上传，通过 ref 调用 submit() 手动触发。

点击或拖拽上传
vue
<my-upload ref="uploadRef" v-model:file-list="files" :auto-upload="false" />
<my-button @click="uploadRef.submit()">开始上传</my-button>

限制文件类型与数量 ​

点击或拖拽上传
仅支持 .jpg / .png / .pdf，最多3个
vue
<my-upload v-model:file-list="files" accept=".jpg,.png,.pdf" :limit="3" multiple />

表单校验 ​

配合 Form 组件校验是否已上传文件。

点击或拖拽上传
vue
<my-form :model="form" :rules="rules">
  <my-form-item prop="files" label="附件">
    <my-upload v-model:file-list="form.files" />
  </my-form-item>
</my-form>

组件结构 ​

<div> 根元素包含拖拽覆盖层、触发区域（含隐藏的 <input type="file"> 和默认/插槽内容），以及按 listType 渲染的文件列表：文本列表（my-upload__list）、图片列表（my-upload__picture-list）或图片卡片墙（my-upload__card-list）。

CSS 类名 ​

类名说明
.my-upload根元素
.is-large大尺寸
.is-small小尺寸
.my-upload__input隐藏的文件输入
.my-upload__trigger触发区域
.is-dragging拖拽中状态
.my-upload__drag-overlay拖拽覆盖层
.my-upload__default默认上传区域
.my-upload__list文本文件列表
.my-upload__file文本文件项
.my-upload__file-name文件名
.my-upload__file-progress上传进度
.my-upload__remove移除按钮
.my-upload__picture-list图片列表
.my-upload__picture-file图片文件项
.my-upload__picture-thumb缩略图
.my-upload__picture-name图片文件名
.my-upload__picture-progress图片上传进度
.my-upload__card-list图片卡片列表
.my-upload__card卡片容器
.my-upload__card--add添加按钮卡片
.is-uploading上传中状态
.is-error上传错误状态
.my-upload__card-img卡片图片
.my-upload__card-actions卡片悬浮操作层
.my-upload__card-progress卡片上传进度
.my-upload__card-btn卡片操作按钮
.my-upload__card-plus添加图标

API ​

Props ​

属性说明类型默认值
fileList文件列表 (v-model)File[][]
accept接受的文件类型string—
multiple是否多选booleanfalse
disabled禁用booleanfalse
limit最大文件数（1 时覆盖前一个）number—
autoUpload自动上传booleantrue
directory上传目录booleanfalse
listType文件列表类型'text' | 'picture' | 'picture-card''text'
showFileList是否显示文件列表booleantrue
size上传区域尺寸'large' | 'default' | 'small''default'

Events ​

事件说明回调
update:fileListv-model 更新(files: File[])
change文件列表变更(files, rawFiles)
preview预览文件（图片墙点击）(file)
remove移除文件(file, index)
exceed超出限制数量(files)

Methods (ref) ​

方法说明
submit()手动上传（autoUpload: false 时）
clearFiles()清空所有文件

Slots ​

名称说明作用域
trigger自定义上传触发区域—
thumbnail自定义缩略图{ file }