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

最新推荐文章于 2024-01-19 15:48:18 发布

Always_OL

最新推荐文章于 2024-01-19 15:48:18 发布

阅读量1.3k

点赞数

分类专栏： js ReactJS 文章标签：微信图片上传 input上传前端上传图片 formData上传文件流上传

本文链接：https://blog.csdn.net/nideshijian/article/details/84343933

版权

本文详细介绍了微信端图片上传的各种方式，包括微信jssdk接口上传、HTML5 input:file上传、微信官方的Base64转换以及文件流上传，并针对每种方式的优缺点进行了分析，旨在提供最优解决方案。

摘要由CSDN通过智能技术生成

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

1. 调用微信jssdk接口上传

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

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

这种上传方式很简单

初始化jssdk接口后，可以直接调用wx.chooseImage拿到本地照片的localId（可以作为img标签的src属性显示图片），调用方式如下：

wx.chooseImage({
   
	count: 1, // 默认9
	sizeType: ['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; //