小程序之批量上传图片

上传图片在项目中属于一个常见场景。在小程序中同样遇到了这样的需求。如何去解决呢？

利用wx.chooseImage()，wx.uploadFile()两个接口即可完成小程序的批量上传图片。

wx.chooseImage()

主要参数：

count：控制选择图片张数至多9张；

sizeType： 选择图片尺寸（压缩：compressed or 原图：original）；

sourceType： 图片来源（相册：album or 拍照：camera）

wx.uploadFile()

主要参数：

url： 图片上传接口；

filePath： 上传资源路径（string）

name: 文件对应的 key,(与后台接口约定的key)

util.js

index.js

[图片上传失败...(image-353ab7-1553483695861)]

[图片上传失败...(image-a789e3-1553483695861)]

a, 批量封装函数中对上传文件大小的监控

b, 加上uploadTask可以实现上传进度的监控

...

<view class="mygroupForm-yzm {{isClicked?'mygroupForm-active':''}}" bindtap="{{isClicked?'':'timeClcik'}}">{{ytext}}</view>

const util = require('../../utils/util.js')

timeClcik(){

    let _this=this

    if (!_this.data.isClicked) {

      wx.showToast({

      title: '验证码已发送',

      })

      //开始倒计时60秒

      setTimeout(()=>{

        _this.setData({

          isClicked:true

        })

        util.settime(_this,60)

      },1500)

     }

  },

function settime(_this,count){

  if (count == 0) {

    _this.setData({

      ytext: '获取验证码',

      isClicked:false

    })

    return

  }

  _this.setData({

    isClicked:true,

    ytext: count + '秒后重发',

  })

  setTimeout(function(){

    count--

    settime(_this, count)

  }, 1000)

}

module.exports = {

  settime: settime

}

---