ThUploadImg上传图片
孙强 2021/11/4 vue
# ThUploadImg上传图片
此组件为element-ui 上传图片组件，上传内容通过缩略图展示，支持点击图片的预览效果
之所以和上传图片的组件独立出来，是因为想要区分开上传组件的展示效果
注意: 预览功能使用的当前项目部署地址的预览服务器,开发环境可以直接使用开发预览服务地址, 预览功能默认开启, 关闭预览需使用全局配置修改
已上传的图片支持拖拽,版本 >= 1.5.43
# 依赖说明
该组件依赖 element-ui
# 基本使用
<th-upload-img v-model="fileList" :limit="1" />
//js
data() {
return {
fileList: [],
}
},
# 效果演示
# Api
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| Array | 文件列表，支持v-model描述 | Array | [] | -- |
| uploadUrl | 文件上传url地址，默认为sce的上传url，可自定义修改 | String | /api/authen/file/up | -- |
| actionData | 文件上传额外参数 | Object | { upType: 'IMAGE' } | -- |
| multiple | 是否支持多选，默认为true | Boolean | true | false |
| limit | 上传文件数量限制，默认为0，即不限制 | Number | 0 | -- |
| limitSizeM | 上传文件数量大小限制，单位M | Number | 10 | -- |
| accept | 上传限制类型的文件 传 * 号为无限制，默认为 | String | .gif,.jpg,.jpeg,.png | |
| msg | 文件描述slot | slot | -- | -- |
| disabled | 是否禁用 | Boolean | false | -- |
| uploadStatus | 上传状态,需要配合 sync修饰符使用 :upload-status.sync="uploadStatus"; 值为0-待上传 1-上传中 2-上传完成 -1-上传失败 | number | 0 | -- |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| uploadError | 上传失败 | 失败内容 |