微信小程序简单实现多图上传(附后端代码)

本来有打算写一套小程序开发简明教程的。觉得系统讲起来可能挺耗费时间的。就先写一些容易遇到的问题的解决吧。

今天是2017-10-23,记一下这个日期,万一小程序的文档改了可能这个问题就不复存在了。

问题:

小程序API中,wx.uploadFile接口只能一次上传一个文件。如果要开发一个多图上传的功能,怎么样才能实现呢?

解决:

使用for循环,遍历图片选择器文件路径。贴代码

  wx.chooseImage({
  count: 9, // 默认9
  sizeType: ['original', 'compressed'], 
  sourceType: ['album', 'camera'], 
  success: function (res) {
    var tempFilePaths = res.tempFilePaths
    for(var i=0;i<10;i++){
      wx.uploadFile({
        url: 'https://api.xianchen.com', //接口地址
        filePath: tempFilePaths[i],
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: function (res) {
          var data = res.data
          //do something
        }
      })
    }
  }
})

后端代码:

后端使用PHP实现。需要注意的是,由于小程序上传传过来的文件名都是一样的,所以我们需要在服务端给传过来的文件改个名字。最简单的方式就是用Unix时间戳来命名。为了提高容错率,需要使用毫秒级的Unix时间戳。PHP不带这个函数,所以自己写了一个。


你可能感兴趣的:(微信小程序简单实现多图上传(附后端代码))