微信前端上传和后台下载临时素材（图片）

工作需要开发微信公众号，然后涉及到微信公众号的临时素材上传，前端上传临时素材到微信服务器，然后Java后台下载临时素材上传到自己的服务器

直接上代码

前端上传代码

	<#--图片选择-->
	<div class="failure-images">
		<ul class="uploadImgs" id="uploadImgs"></ul>
		<img src="${re.contextPath}/images/imgupload.png" onclick="getImage()">
	</div>

	<#-- 图片预览-->
	<div class="preview" id="preview">
		<span onclick="closeThisImg()">X</span>
		<img src="" id="preview-img">
	</div>

	/**
     * 微信获取图片
     */
    function getImage(){
        var imgLength = $('#uploadImgs img').length;
        if(imgLength>=3){
            alert('您最多可上传三张图片！')
        }else{
            wx.chooseImage({
                count: 3-imgLength, // 相册选择图片的数量
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    var localIdSize = localIds.length;
                    var localIdIndex = 0;
                    uploadImg(localIdIndex);
                    function uploadImg(index) {
                        wx.getLocalImgData({
                            localId: localIds[index].toString(), // 图片的localID
                            success: function (res) {
                                if(res.localData.indexOf('base64')>=0){
                                    $('#uploadImgs').append('<li class="loadImg'+index+'"><img src="'+res.localData+'" onclick="enlarge(this)"><i class="removeImgItem"></i></li>')
                                }else{
                                    var thisImageSrcs = "data:image/jpg;base64,"+res.localData;
                                    $('#uploadImgs').append('<li class="loadImg'+index+'"><img src="'+thisImageSrcs+'" onclick="enlarge(this)"><i class="removeImgItem"></i></li>')
                                }
                                if (localIds[index].indexOf("wxlocalresource") != -1) {
                                    localIds[index] = localIds[index].replace("wxlocalresource", "wxLocalResource");
                                }
                                wx.uploadImage({
                                    localId: localIds[index].toString(),
                                    isShowProgressTips: 0, // 默认为1，显示进度提示
                                    success: function (res) {
                                        $('#uploadImgs').find('.loadImg'+index).attr('serverId',res.serverId);
                                        localIdIndex ++;
                                        if(localIdIndex < localIdSize) {
                                            setTimeout(function(){
                                                uploadImg(localIdIndex);
                                            },100)
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
            })
        }
    }

	/**
     * 上传图片预览
     */
    function enlarge(self) {
        $("#preview").show()
        var imgUrlS = $(self).attr('src');
        $("#preview img").attr('src', imgUrlS);
    }

    /**
     * 关闭图片预览
     */
    function closeThisImg() {
        $("#preview").hide();
    }

    /**
     * 移除当前图片
     */
    $('#uploadImgs').on('click','.removeImgItem',function(){
        $(this).parent().remove()
    })
	
	/**
     * 获取要上传的serverId
     */
	var serverIdList = [];
	$('#uploadImgs li').each(function(){
		if($(this).attr('serverId')){
			serverIdList.push($(this).attr('serverId'));
		}
	});

说下前端上传时候的一些问题吧，我们原来的做法是前端调用微信的接口获取base64码，直接把base64码传到Java后端，但是ios版本可以安卓不可以，（微信诟病的地方就是安卓和iOSbase64编码返回不一样），后来改成直接上传到微信临时素材再把serviceId传给后端，后端自己去获取，这中间也发生了一些问题，变成了安卓可以三连张iOS不可以，最终从网上各种查发现有两个问题点吧，一个是微信上传临时素材循环调用会出问题所以上述代码有个递归调用并且阻塞系统了一下，又把另一个微信的名字wxlocalresource 改为wxLocalResource才解决不能三连张选择。

还有一个小问题是微信上传临时素材会自动压缩图片大约为原来的十分之一大小，所以如果图片是被微信压缩过的 再上传就会感觉贼糊

后端代码

import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;

public class PicDownload {

    //定义两个成员变量常量
    //获取临时素材(视频不能使用https协议)
    private static final String GET_TMP_MATERIAL = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=%s&media_id=%s";
    //获取临时素材(视频)
    private static final String GET_TMP_MATERIAL_VIDEO = "http://api.weixin.qq.com/cgi-bin/media/get?access_token=%s&media_id=%s";

    //获取微信服务器中生成的媒体文件

    //由于视频使用的是http协议，而图片、语音使用http协议，故此处需要传递media_id和type
    public static InputStream fetchTmpFile(String mediaId, String type,String token){
        InputStream inputStream = null;
        try {
            String url = null;
            //视频是http协议
            if("video".equalsIgnoreCase(type)){
                url = String.format(GET_TMP_MATERIAL_VIDEO, token, mediaId);
            }else{
                url = String.format(GET_TMP_MATERIAL, token, mediaId);;
            }
            URL urlGet = new URL(url);
            HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
            http.setRequestMethod("GET"); // 必须是get方式请求
            http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");
            http.setDoOutput(true);
            http.setDoInput(true);
            http.connect();
            inputStream = http.getInputStream();
            } catch (Exception e) {
                e.printStackTrace();
            }
            return inputStream;
    }
}