介绍: 通过微信的API实现上传图片,你可以接收到图片和一个开关。

使用方法:

  • 将组件放到pages/component文件夹中(没有可以自己创建一个)
  • 全局配置此组件 在app.json中注册

    1. "usingComponents":{
    2. "liu-upload-img":"/pages/components/LiuUpLoadImg/LiuUpLoadImg"
    3. }
  • 通过在页面中写入

    1. <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”] } }

  1. <a name="BtMsA"></a>
  2. # 事件
  3. 绑定 bindgetImgs 通过 evet事件你可以得到一个布尔值和上传好的图片地址(用于上传后台)
  4. ```html
  5. <liu-upload-img bindgetImgs="getImg" />
  6. getImg:function(e){
  7. console.log(e)
  8. e.detail.imgUrl // 图片地址
  9. e.detail.switch // 是否上传完毕 true 或者是 空值 '' 当你删除图片至数组为0时会返给你一个空值
  10. }
  • 待补充
  • 点击预览图片
  • 自定义删除图片按钮