介绍: 通过微信的API实现上传图片,你可以接收到图片和一个开关。
使用方法:
- 将组件放到pages/component文件夹中(没有可以自己创建一个)
全局配置此组件 在app.json中注册
"usingComponents":{"liu-upload-img":"/pages/components/LiuUpLoadImg/LiuUpLoadImg"}
通过在页面中写入
<liu-upload-img />
既可开始使用
接收的参数
| 关键字 | 是否必填 | 类型 | 用途 |
|---|---|---|---|
| upLoad | 非必填 | String | 自定义展示图片样式 |
| imgLength | 非必填 | Number | 可上传图片的数量,默认为9 |
| uploadUrl | 必填 | String | 上传转换的云地址 |
| showImgs | 非必填 | Objet | 展示上传过的图片 |
| width | 非必填 | Number | 展示的图片大小,默认160rpx |
- showImgs的补充
```html
data:{ // showImg 用于展示的内容 // saveArr 用于上传的地址 // 这两个一定要用对象包裹数组的方式传给组件 showImgs:{ showImg:[ “https://qiniubangongshi.jc.bronet.cn/uploads/20210130/34a0878c2036ccc1922b2e3e0b08f640.png“], saveArr:[“/uploads/20210130/34a0878c2036ccc1922b2e3e0b08f640.png”] } }
<a name="BtMsA"></a># 事件绑定 bindgetImgs 通过 evet事件你可以得到一个布尔值和上传好的图片地址(用于上传后台)```html<liu-upload-img bindgetImgs="getImg" />getImg:function(e){console.log(e)e.detail.imgUrl // 图片地址e.detail.switch // 是否上传完毕 true 或者是 空值 '' 当你删除图片至数组为0时会返给你一个空值}
- 待补充
- 点击预览图片
- 自定义删除图片按钮
