JS开发微信公众号上传图片到本地服务器

这种办法的难点在于需要判断系统，并且对微信返回的数据进行base编码，然后在服务器端还得写base解码的逻辑，本文不使用通用的做法，而是采用先上传到微信服务器，再到后台服务器端从微信服务器下载回来保存到文件服务器。具体代码如下：

1、页面

<input type="button" id="uploadBtn">

页面上只有一个普通的button的上传按钮

2、js逻辑

$('#uploadBtn').click(function () {
	wx.chooseImage({
	count: 1,
	sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
	success: function (res) {
	var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
	that.uploadImg(localIds[0]);
	}
	});
});

//具体上传图片
uploadImg: function (e) {
	wx.uploadImage({
	localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得
	isShowProgressTips: 1, // 默认为1，显示进度提示
	success: function (res) {
	serverId = res.serverId;
	$.ajax({
	url: "/uploadImg",
	dataType: "json",
	async: false,
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	data: {"mediaId": serverId},
	type: "POST",
	timeout: 30000,
	success: function (data, textStatus) {
	$('#imgUrl').val(data);
	$.toast('上传成功', 'text');
	},
	error: function (XMLHttpRequest, textStatus, errorThrown) {
	$.toast('上传错误,请稍候重试!', 'text');
	}
	});
	},
	fail: function (error) {
	$.toast('上传错误,请稍候重试!', 'text');
	}
	});
}

先调用wx.chooseImage方法来选择图片，然后将结果再调用上传图片的方法wx.uploadImage，拿到上传成功的返回值就是mediaId，再调用我们自己写的服务器端的controller方法将mediaId通过ajax提交过去，接下来就是服务器端的代码。

3、服务器端处理逻辑

/**
 * 获取临时素材
 *
 * @param mediaId 媒体文件ID
 * @return 正确返回附件对象，否则返回null
 * @throws WeixinException
 */
 public Attachment downloadMedia(String mediaId) throws WeixinException {
 //下载资源
 String url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=" + this.oauthToken.getAccess_token() + "&media_id=" + mediaId;
 //创建请求对象
 HttpsClient http = new HttpsClient();
 return http.downloadHttps(url);
 }
 
其中Attachment表示下载文件返回值对象，包含的属性有：
public class Attachment {

 private String fileName;
 private String fullName;
 private String suffix;
 private String contentLength;
 private String contentType;
 private BufferedInputStream fileStream;
 private String error;
 
 省略get/set方法
}

调用downloadMedia方法之后获取Attachment对象，主要就是对BufferedInputStream对象的fileStream来进行处理，这个属性就是图片文件流，保存文件流到本地就有很多的方法，可以使用apache提供的FileUtils类来处理，这里就不提供具体的代码了，网上很多类似的。至此我们就已经成功的实现在微信公众号上上传图片到本地服务器了。