📄 前端上传组件
内部资料，请扫码登录
pigcloud
# 普通文件上传
<upload-file @change="success" />
# 属性说明
| 属性名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 组件的值 | string | Array | 必传 |
| limit | 数量限制 | number (非必传) | 5 |
| fileSize | 文件大小限制 | number (非必传) | 5MB |
| 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 |
# 图片上传
<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 (非必传) |
| 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) |
# 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 |