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

微信公众号开发中一般会涉及到在手机公众号程序中选择本地图片或者拍照，将图片上传到本地后台服务器的功能，网上的做法一般是调用微信官方提供的chooseImage方法，再判断是android还是ios并且是否使用WKWebview内核，最后再分别处理返回值将之转为base64编码的数据，再上传到服务器上。

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

1、页面

页面上只有一个普通的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类来处理，这里就不提供具体的代码了，网上很多类似的。至此我们就已经成功的实现在微信公众号上上传图片到本地服务器了。

  微信公众号