微信服务号开发之jssdk-照片上传、下载总结

红太狼 2020-11-28 06:00 739阅读 0赞

**微信服务号开发之jssdk-照片上传、下载 总结**

在做微信服务号商城时有一点开店审核需要开店者在手机微信端上传照片，然后后台浏览以便审核，一开始大概看了一下jssdk文档，然后没有仔细去看，以为和微信支付一样，调用了它的jsp代码就会回调一个照片地址给action，然后存到数据库，后台调用出来查看。后来发现自己错了。因为我一直找不到回调函数怎么写。后来才发现，原来我们上传的东西都是先存放到微信自己的服务器上，他会在jssdk方法的script中给你一个serverId，你可以吧serverId（64位）存到数据库中，然后你在后台利用serverId再通过方法取出来，此方法代码：  
````java
package com.util;

import java.io.FileNotFoundException;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.OutputStream;

import org.apache.http.HttpResponse;  
import org.apache.http.client.ClientProtocolException;  
import org.apache.http.client.HttpClient;  
import org.apache.http.client.methods.HttpGet;  
import org.apache.http.impl.client.DefaultHttpClient;

import weixin.popular.api.TokenAPI;  
import weixin.popular.bean.Token;

import com.action.WeixinConfig;

public class HttpDownload {

static HttpClient client = new DefaultHttpClient();
    
    /**
     * filename
     *    request.getSession().getServletContext().getRealPath("/图片目录")+"aa.jpg"
     * 
     * @param url        下载地址
     * @param filename   保存路径
     * @return           true下载成功
     */
    public boolean download(String url, String filename)
    {
        try {
            HttpGet httpGet = new HttpGet(url);
            HttpResponse response = client.execute(httpGet);
            if (response.getStatusLine().getStatusCode()==200)
            {
               InputStream is = response.getEntity().getContent();
               OutputStream out = new FileOutputStream(filename);
               byte[] b  = new byte[1024];
               int size = is.read(b);
               while (size>0)
               {
                   out.write(b,0,size);
                   size = is.read(b);
               }
               out.close();
               is.close();
            }
            httpGet.releaseConnection();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return false;
        } 
    
        return true;
    
    }
    
    /*public static void main(String[] args) {
        String appid = WeixinConfig.APPID;
        String secret = WeixinConfig.APPSECRET;
        Token token = new TokenAPI().token(appid, secret);
        String access_token = token.getAccess_token();
    
        String media_id = "ZgSqxcH9j_xyxg2Z3Fjtxsr8ypHJ3NBOpWSeszN-Uxc2smtDEXBqOxi0kTjS4cEB";
        String url="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+access_token+"&media_id="+media_id;
        String filename="WebRoot/img/sh82.jpg";
        //filename  就是存放照片的地方
        boolean b = download(url,filename);
        System.out.println("bbb:"+b);
    }*/

}
````
jsp中代码：（详见jssdk开发文档）  
````
document.querySelector(‘#choose_img’).onclick = function () {  
wx.chooseImage({  
success: function (res) {  
images.localId = res.localIds;  
var localIds = res.localIds;  
numimg = numimg + images.localId.length;  
if(numimg>3)  
{  
numimg = numimg - images.localId.length;  
alert(“只需上传三张照片”);  
return;  
}  
//alert(‘已选择 ’ + res.localIds.length + ’ 张图片’);  
var first_item = $(“#choose_img”);  
var xxx = null; // 添加图片的盒子 预览  
var div = document.getElementById(“goodscontainer”);  
for(var i in res.localIds) {

xxx = '<div class="goods_item2">' +
                                '<img id="previewImage" src=' + res.localIds[i] + ' width="100%" height="100%">' +
                                '<p class="cancel mui-icon mui-icon-closeempty" onclick="removeown(this)"></p></div>';
    
                        var div2 = $(xxx + '');
                        div2.insertBefore($(first_item));
                        //div2.appendTo($(div));
                    }
                    //上传、
                    syncUpload(localIds);
                  }
                })
              };
              var syncUpload = function(localIds){
                 var localId = localIds.pop();
                 wx.uploadImage({
                  localId: localId,
                  isShowProgressTips: 1,
                  success: function (res) {
                   images.serverId = res.serverId; // 返回图片的服务器端ID
                   $.ajax({
                        url:"${pageContext.request.contextPath}/paizhao.do?method=getserverId",
                        data:{serverId:images.serverId},
                        success:function(data)
                        {   //alert("ttt");
    
                        },
                        error:function(xhr){
                        alert(xhr.status);
                        }
                    });
    
                   if(localIds.length > 0){
                    syncUpload(localIds);
                   }
                  }
                 });
    
                };
				
````