做過(guò)微信開(kāi)發(fā)的都知道，在部分android機(jī)型里微信不支持網(wǎng)頁(yè)上傳圖片的，這是由于這些機(jī)型的文件上傳存在內(nèi)存泄漏，會(huì)導(dǎo)致微信閃退，所以微信內(nèi)置瀏覽器將文件上傳屏蔽，本篇文章給大家介紹使用微信jssdk如何上傳圖片，需要的朋友可以關(guān)注下

前不久微信公開(kāi)了一些接口，其中有一個(gè)uploadImage接口用于上傳圖片，一般和chooseImage接口配合使用。先調(diào)用chooseImage接口讓用戶選擇一張或者多張圖片，用戶選擇完畢后微信會(huì)返回被選中圖片的id，再把圖片id傳給uploadImage接口上傳圖片。

最近做的一個(gè)項(xiàng)目，剛好用到了JSSDK，把用到的東西整理下。

先附上微信開(kāi)發(fā)者文檔鏈接：微信開(kāi)發(fā)者文檔

主要用到了：

引入JS文件

在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

我們需要獲取微信js-sdk參數(shù)

/** 
 * 獲取access_token 
 *  
 * @param appid 
 *      憑證 
 * @param appsecret 
 *      密鑰 
 * @return 
 */ 
public static WxAccessToken getAccessToken() { 
  WxAccessToken accessToken = null; 
  String requestUrl = access_token_url.replace("APPID", Setting.getSetting("WX_PL_APP_ID")).replace( 
      "APPSECRET", Setting.getSetting("APP_SECRET")); 
  JSONObject jsonObject = httpRequest(requestUrl, "GET", null); 
  // 如果請(qǐng)求成功 
  if (null != jsonObject) { 
    try { 
      accessToken = new WxAccessToken(); 
      accessToken.setToken(jsonObject.getString("access_token")); 
      accessToken.setExpiresIn(jsonObject.getInt("expires_in")); 
    } catch (JSONException e) { 
      accessToken = null; 
      // 獲取token失敗 
      log.error("獲取token失敗 errcode:{} errmsg:{}", 
          jsonObject.getInt("errcode"), 
          jsonObject.getString("errmsg")); 
    } 
  } 
  return accessToken; 
} 
public static String jsapiTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; 
/** 
 * 獲取JsTicket 
 *  
 * @param accessToken 
 *      accessToken 
 * @return 
 */ 
public static WxJsTicket getJsTicket(String accessToken) { 
  WxJsTicket jsTicket = null; 
  String url = jsapiTicket.replaceAll("ACCESS_TOKEN", accessToken); 
  JSONObject jsonObject = httpRequest(url, "GET", null); 
  // 如果請(qǐng)求成功 
  if (null != jsonObject) { 
    try { 
      jsTicket = new WxJsTicket(); 
      jsTicket.setTicket(jsonObject.getString("ticket")); 
      jsTicket.setExpiresIn(jsonObject.getInt("expires_in")); 
    } catch (JSONException e) { 
      jsTicket = null; 
      // 獲取token失敗 
      log.error("獲取jsapiTicket失敗 errcode:{} errmsg:{}", 
          jsonObject.getInt("errcode"), 
          jsonObject.getString("errmsg")); 
    } 
  } 
  return jsTicket; 
}

需要注意接口的調(diào)用次數(shù)是有限制的，需要控制好。

頁(yè)面的配置

wx.config({ 
   debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。 
   appId: "$!{wxsign.get('appId')}", // 必填，公眾號(hào)的唯一標(biāo)識(shí) 
   timestamp: "$!{wxsign.get('timeStamp')}", // 必填，生成簽名的時(shí)間戳 
   nonceStr: "$!{wxsign.get('nonceStr')}", // 必填，生成簽名的隨機(jī)串 
   signature: "$!{wxsign.get('signature')}",// 必填，簽名，見(jiàn)附錄1 
   jsApiList: ['checkJsApi', 
         'chooseImage', 
         'previewImage', 
         'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2 
 }); 
 
 var images = { 
  localId: [], 
  serverId: [] 
 };

拍照或從手機(jī)相冊(cè)中選圖接口

wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
  }
});

上傳圖片接口

wx.uploadImage({
  localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得
  isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
  success: function (res) {
    var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
  }
});

微信返回的serverid我們需要通過(guò)微信api獲取真實(shí)的圖片二進(jìn)制數(shù)據(jù)。

/** 
 * 獲取媒體文件 
 *  
 * @param accessToken 
 *      接口訪問(wèn)憑證 
 * @param media_id 
 *      媒體文件id 
 * */ 
public static String downloadMedia(String mediaId,HttpServletRequest request) { 
  String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"; 
  requestUrl = requestUrl.replace("ACCESS_TOKEN", WxTokenThread.accessToken.getToken()).replace( 
      "MEDIA_ID", mediaId); 
  HttpURLConnection conn = null; 
  try { 
    URL url = new URL(requestUrl); 
    conn = (HttpURLConnection) url.openConnection(); 
    conn.setDoInput(true); 
    conn.setRequestMethod("GET"); 
    conn.setConnectTimeout(30000); 
    conn.setReadTimeout(30000); 
    BufferedInputStream bis = new BufferedInputStream( 
        conn.getInputStream()); 
    ByteArrayOutputStream swapStream = new ByteArrayOutputStream();  
    byte[] buff = new byte[100];  
    int rc = 0;  
    while ((rc = bis.read(buff, 0, 100)) > 0) {  
      swapStream.write(buff, 0, rc);  
    }  
    byte[] filebyte = swapStream.toByteArray();  
    return PictureStore.getInstance().getImageServerUrl() + PictureStore.getInstance().store(filebyte); 
  } catch (Exception e) { 
    e.printStackTrace(); 
  } finally { 
    if(conn != null){ 
      conn.disconnect(); 
    } 
  } 
  return ""; 
}

整體上做這個(gè)功能還是比較簡(jiǎn)單的，只不過(guò)以前沒(méi)有接觸過(guò)微信api。

微信 jssdk 上傳多張圖片

代碼如下：

jssdk

$('#filePicker').on('click', function () {
 wx.chooseImage({
  success: function (res) {
   var localIds = res.localIds;
   syncUpload(localIds);
  }
 });
});
var syncUpload = function(localIds){
 var localId = localIds.pop();
 wx.uploadImage({
  localId: localId,
  isShowProgressTips: 1,
  success: function (res) {
   var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
   //其他對(duì)serverId做處理的代碼
   if(localIds.length > 0){
    syncUpload(localIds);
   }
  }
 });
};

本文給大家分享了微信JSSDK上傳圖片的方法，希望對(duì)大家今后的工作學(xué)習(xí)有所幫助，當(dāng)然方法也不止以上一種，還有很多，歡迎大家多多分享自己的經(jīng)驗(yàn)。

您可能感興趣的文章: