38 lines
1.8 KiB
Markdown
Raw Normal View History

2024-04-28 10:10:03 +08:00
# l-upload
组件会根据图片大小自动调整每行图片数量图片之间的上下左右间距
# 使用方法
配置easycom规则后自动按需引入无需`import`组件,直接引用即可。
#
注意 使用接口地址需要自己在组件中的uploadImage方法中根据自己组件返回数据进行修改
```html
<l-upload @complete="complete" @remove="remove"></l-upload>
```
## 组件属性
| 属性 | 类型 | 默认值 | 说明 |
|:---:|:---:|:---:|---|
| width | Number | 220 | 图片宽度单位rpx |
| height | Number | 220 | 图片高度单位rpx |
| uploadType | String | all | 上传类型 图片img 视频video 默认都可以 |
| 禁用添加 | Boolean | false | 禁用添加按钮,默认达到限制数量后禁用 |
| limit | Number | 9 | 图片视频限制数 |
| sizeType | Array<String> | ['original', 'compressed'] | original 原图compressed 压缩图,默认二者都有 |
| sourceType | Array<String> | ['album', 'camera'] | album 从相册选图camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 |
| imageFormat | Array<String> | [] | 可上传图片类型,默认为空,不限制 ['jpg','png','gif'] |
| images | Array | [] | 初始图片,如果是修改需要回显内容就能用到 |
| videos | Array | [] | 初始视频 |
| serverUrl | String | '' | 服务器接口地址。当接口地址为空时,直接返回本地图片地址 |
| fileKeyName | String | 'file' | 文件对应的key默认为 file |
| header | Object | {} | HTTP 请求 Header, header 中不能设置 Referer。 |
| formData | Object | {} | HTTP 请求中其他额外的 form data |
## 组件事件
| 名称 | 触发时机 |
|:---:|---|
| complete | 上传完成事件 返回文件信息 |
| remove | 删除 返回index |