前端上传组件

普通文件上传

<upload-file @change="success" />

属性说明

属性名称	描述	类型	默认值
modelValue	组件的值	string / Array	必传
limit	数量限制	number (非必传)	5
fileSize	文件大小限制	number (非必传)	5MB
minFileSize	最小文件大小限制(KB)，低于此大小的文件视为无效文件	number (非必传)	0（不限制）
fileType	文件类型限制	Array (非必传)	['png', 'jpg', 'jpeg', 'doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'pptx']
isShowTip	是否显示提示	boolean (非必传)	true
uploadFileUrl	上传文件的 API 方法	string (非必传)	'/admin/sys-file/upload'
type	组件类型	string (非必传)	'default'
data	需要额外传递给 API 的数据	Object (非必传)	-
dir	子目录名称	String (非必传)	a/b 格式，v5.3+
autoUpload	是否自动上传文件	boolean (非必传)	true

文件类型限制

通过 fileType 属性可以限制允许上传的文件类型，默认支持常见的文档和图片格式。如需自定义，请传入文件扩展名数组。

图片上传

<upload-img v-model:imageUrl="formData.avatar" borderRadius="50%">
  <template #empty>
    <el-icon><Avatar /></el-icon>
    <span>请上传头像</span>
  </template>
</upload-img>

属性说明

属性名称	描述	类型
imageUrl	图片地址（双向绑定，上传会更新返回此字段）	string (必传)
uploadFileUrl	上传图片的 API 方法	string (非必传)
dir	子目录名称	String (非必传)，a/b 格式，v5.3+
drag	是否支持拖拽上传	boolean (非必传，默认为 true)
disabled	是否禁用上传组件	boolean (非必传，默认为 false)
fileSize	图片大小限制	number (非必传，默认为 5M)
fileType	图片类型限制	File.ImageMimeType[] (非必传，默认为 ["image/jpeg", "image/png", "image/gif"])
height	组件高度	string (非必传，默认为 150px)
width	组件宽度	string (非必传，默认为 150px)
borderRadius	组件边框圆角	string (非必传，默认为 8px)

双向绑定

使用 v-model:imageUrl 实现双向数据绑定，上传成功后会自动更新绑定的图片地址。

Excel 文件上传

<upload-excel
  ref="excelUploadRef"
  :title="$t('sysuser.importUserTip')"
  temp-url="/admin/sys-file/local/file/user.xlsx"
  url="/admin/user/import"
  @refreshDataList="getDataList"
/>

属性说明

属性名称	描述	类型
url	导入文件后台接口	String
title	弹出框标题	String
tempUrl	获取当前导入 Excel 模板地址	String

模板下载

使用 Excel 导入功能时，建议先提供模板文件供用户下载，确保导入数据格式正确。通过 tempUrl 属性配置模板下载地址。

图片粘贴上传组件

版本要求

V5.11 及以后版本新增支持

<template>
  <ImagePaste v-model="imageUrls" />
</template>

<script setup lang="ts">
import ImagePaste from '/@/components/Upload/ImagePaste.vue';

const imageUrls = ref('');
</script>

Props

属性	类型	默认值	说明
`modelValue`	`String / Object / Array`	`''`	绑定值，多图以逗号分隔
`action`	`String`	`/admin/sys-file/upload`	上传接口地址
`data`	`Object`	`{}`	上传时携带的额外参数
`limit`	`Number`	`5`	图片数量限制
`fileSize`	`Number`	`2`	文件大小限制（MB）
`fileType`	`String[]`	`['png', 'jpg', 'jpeg']`	允许的文件类型
`isShowTip`	`Boolean`	`true`	是否显示上传提示
`disabled`	`Boolean`	`false`	是否禁用

Events

事件名	参数	说明
`update:modelValue`	`(value: string)`	图片列表变化时触发，返回逗号分隔的 URL 字符串

粘贴上传

ImagePaste 组件支持直接粘贴剪贴板中的图片，适用于快速上传截图等场景，大幅提升用户体验。

本页目录

#前端上传组件

#普通文件上传

#属性说明

#图片上传

#属性说明

#Excel 文件上传

#属性说明

#图片粘贴上传组件

#Props

#Events

前端上传组件

普通文件上传

属性说明

图片上传

属性说明

Excel 文件上传

属性说明

图片粘贴上传组件

Props

Events