WeChat JSSDK memuat naik kemahiran pictures_javascript

Tidak lama dahulu, WeChat mengeluarkan beberapa antara muka, antaranya terdapat antara muka muat naik Imej untuk memuat naik imej, yang biasanya digunakan bersama antara muka pilihImej. Mula-mula panggil antara muka chooseImage untuk membenarkan pengguna memilih satu atau lebih gambar Selepas pengguna melengkapkan pemilihan, WeChat akan mengembalikan ID gambar yang dipilih, dan kemudian menghantar ID gambar ke antara muka muat naik Imej untuk memuat naik gambar.

Projek yang saya kerjakan baru-baru ini menggunakan JSSDK. Mari kita selesaikan perkara yang digunakan.

Mula-mula lampirkan pautan ke Dokumentasi Pembangun WeChat: Dokumentasi Pembangun WeChat

Terutamanya digunakan:

Perkenalkan fail JS

Perkenalkan fail JS berikut ke dalam halaman yang perlu memanggil antara muka JS (https disokong): http://res.wx.qq.com/open/js/jweixin-1.0.0.js

Kita perlu mendapatkan parameter WeChat js-sdk

/** 
 * 获取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); 
  // 如果请求成功 
  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); 
  // 如果请求成功 
  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; 
} 

Perlu diingat bahawa bilangan panggilan ke antara muka adalah terhad dan perlu dikawal.

Konfigurasi halaman

wx.config({ 
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
   appId: "$!{wxsign.get('appId')}", // 必填，公众号的唯一标识 
   timestamp: "$!{wxsign.get('timeStamp')}", // 必填，生成签名的时间戳 
   nonceStr: "$!{wxsign.get('nonceStr')}", // 必填，生成签名的随机串 
   signature: "$!{wxsign.get('signature')}",// 必填，签名，见附录1 
   jsApiList: ['checkJsApi', 
         'chooseImage', 
         'previewImage', 
         'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 
 }); 
 
 var images = { 
  localId: [], 
  serverId: [] 
 }; 

Antara muka untuk mengambil gambar atau memilih gambar daripada album telefon bimbit

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

Muat naik antara muka gambar

wx.uploadImage({
  localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
  isShowProgressTips: 1, // 默认为1，显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回图片的服务器端ID
  }
});

Untuk serverid yang dikembalikan oleh WeChat, kami perlu mendapatkan data binari imej sebenar melalui API WeChat.

/** 
 * 获取媒体文件 
 *  
 * @param accessToken 
 *      接口访问凭证 
 * @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 ""; 
} 

Secara keseluruhan, agak mudah untuk melaksanakan fungsi ini, tetapi saya tidak pernah didedahkan kepada API WeChat sebelum ini.

WeChat jssdk memuat naik berbilang gambar

Kodnya adalah seperti berikut:

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; // 返回图片的服务器端ID
   //其他对serverId做处理的代码
   if(localIds.length > 0){
    syncUpload(localIds);
   }
  }
 });
};

Artikel ini berkongsi dengan anda kaedah memuat naik imej dengan WeChat JSSDK Saya harap ia akan membantu anda dalam kerja dan kajian masa hadapan dialu-alukan untuk berkongsi pengalaman anda.