微信小程序选择并上传图片

Posted 2020-10-21 姚玉倩的博客

上传图片
API: wx.chooseImage() 和 wx.uploadFile()

wx.chooseImage({
  count: 1, // 默认9
  sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
  success: function(res) {
    console.log(res.tempFiles); // 图片的本地文件列表，每一项是一个file对象
    // 结果: [{path: "http://tmp/wx0ffcd03a1dfdc451.o6zAJs7JDPzeAscW09c_BG24fpdU.6919dfcada671055948023075afd859a.jpg", size: 61034}, ...]
    console.log(res.tempFilePaths); // 图片的本地文件路径列表
    // 结果: ["http://tmp/wx0ffcd03a1dfdc451.o6zAJs7JDPzeAscW09c_BG24fpdU.6919dfcada671055948023075afd859a.jpg"]
    var tempFilePaths = res.tempFilePaths;
    wx.uploadFile({ 
      url: ‘/your_url/receive_file‘, // 图片上上传的地址，请求方式默认为POST且不可更改
      filePath: tempFilePaths[0], // 要上传的文件的路径，注：一次只能上传一个文件，若要上传多张图片，请使用递归
      name: ‘file‘, // 文件对应的键名，后端可以通过这个key获取到文件的二进制内容
      formData:{
        ‘user_id‘: ‘123‘,
        ‘name‘: ‘Jack‘,
        ‘age‘: 18
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

如果需要上传多张图片，那么需要把wx.uploadFile()封装成一个函数，判断图片上传是否完成，如果没有完成，则一直调用这个函数，否则，图片上传完成。