微信端调取相册或摄像头,实现图片上传

前言:微信端图片上传遇到过很多问题,图片太大上传失败,带宽不够,图片上传不完整等,今天写这篇博客就是为了记录下曾经处理过的方式。同时也可以给需要的人节省点时间,采用最优解。
1. 调用微信jssdk接口上传

微信1.4.0版本之前给的接口如下:

1、wx.chooseImage  //拍照或从手机相册中选图接口
2、wx.uploadImage  //上传图片接口
3、wx.downloadImage  //下载图片接口

这种上传方式很简单

  • 初始化jssdk接口后,可以直接调用wx.chooseImage拿到本地照片的localId(可以作为img标签的src属性显示图片),调用方式如下:
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表}
});
  • 把拿到的localIds进行上传到微信的临时素材(有效期3天),调用方式如下:
wx.uploadImage({localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID}
});
  • 第三步就是把serverId传递给后台,由后台去下载图片到自己的服务器,再上传至腾讯云,调用方式如下:
wx.downloadImage({serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {var localId = res.localId; 

微信端调取相册或摄像头,实现图片上传

前言:微信端图片上传遇到过很多问题,图片太大上传失败,带宽不够,图片上传不完整等,今天写这篇博客就是为了记录下曾经处理过的方式。同时也可以给需要的人节省点时间,采用最优解。
1. 调用微信jssdk接口上传

微信1.4.0版本之前给的接口如下:

1、wx.chooseImage  //拍照或从手机相册中选图接口
2、wx.uploadImage  //上传图片接口
3、wx.downloadImage  //下载图片接口

这种上传方式很简单

  • 初始化jssdk接口后,可以直接调用wx.chooseImage拿到本地照片的localId(可以作为img标签的src属性显示图片),调用方式如下:
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表}
});
  • 把拿到的localIds进行上传到微信的临时素材(有效期3天),调用方式如下:
wx.uploadImage({localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID}
});
  • 第三步就是把serverId传递给后台,由后台去下载图片到自己的服务器,再上传至腾讯云,调用方式如下:
wx.downloadImage({serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {var localId = res.localId;