小程序之批量上传图片

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

利用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可以实现上传进度的监控

...

这一报错在微信开发者论坛中被多次提及，最多被提到的就是这一方法。

wx.draw()是一个异步执行的api，canvasToTempFilePath需要在其回调中执行。延迟 200毫秒 一般就可以解决这个问题。

当这个api只执行一次时延迟200毫秒其实无所谓，但是多次调用时，这个延迟也浪费了不少时间。对于性能强大的手机，这也是一种浪费，一般只有性能较弱的安卓机才会出现这个问题。所以我更建议大家使用下面一个。

canvasToTempFilePath本身也是异步api，有错误回调可以使用。

我的项目中需要绘制的图片大小为180*180px，耗时基本在50-100ms左右。报错一次以后canvas基本也就准备好了，一般不会错第三遍。

题外话：这一个api的耗时与画布大小密切相关，也建议大家绘制图片时一定要控制好canvas画布大小。比方说，绘制200*200的图片，canvas要大小一致。尤其是图片数量比较大时，在模拟器上体现不出差别，但是手机上影响很大。

第一步：获取七牛云token，这步 *** 作很简单，请求七牛云接口即可

getUpToken: function() {

    var url = "resource/getUpToken"

    var header = {

      token : wx.getStorageSync("token")

    }

    var that = this

    network.requestLoading(url,"",header,"",function(data){

      console.log(data)

      that.setData({

        up_token : data.data

      })

    },function(){

    })

  },

第二步：利用upfile API上传文件

wx.uploadFile({

              formData:{token:that.data.up_token}, //这里是请求头部分

              url: 'url',

              filePath: tempFilePaths[i],

              name:"file",

              success:function(data) {

                var res = JSON.parse(data.data)

                var image_keys = that.data.image_keys.concat(res.key)

              }

            })

---