WeChat JSSDK 업로드 사진_javascript 기술

얼마 전 WeChat은 일부 인터페이스를 출시했는데 그중에는 일반적으로 chooseImage 인터페이스와 함께 사용되는 이미지 업로드용 uploadImage 인터페이스가 있습니다. 먼저 chooseImage 인터페이스를 호출하여 사용자가 하나 이상의 사진을 선택할 수 있도록 합니다. 사용자가 선택을 완료하면 WeChat은 선택한 사진의 ID를 반환한 다음 사진 ID를 uploadImage 인터페이스에 전달하여 사진을 업로드합니다.

최근 작업한 프로젝트에서 JSSDK를 사용하게 되었는데, 사용한 내용을 정리해 보겠습니다.

먼저 WeChat 개발자 문서 링크를 첨부하세요: WeChat 개발자 문서

주로 사용되는 단어:

JS 파일 소개

JS 인터페이스를 호출해야 하는 페이지에 다음 JS 파일을 삽입합니다(https 지원): http://res.wx.qq.com/open/js/jweixin-1.0.0.js

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; 
} 

인터페이스 호출 횟수는 제한되어 있으므로 제어해야 한다는 점에 유의해야 합니다.

페이지 구성

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: [] 
 }; 

사진을 찍거나 휴대폰 앨범에서 사진을 선택하기 위한 인터페이스

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

사진 인터페이스 업로드

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

WeChat에서 반환된 서버 ID의 경우 WeChat API를 통해 실제 이미지 바이너리 데이터를 얻어야 합니다.

/** 
 * 获取媒体文件 
 *  
 * @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 ""; 
} 

전체적으로 이 기능을 구현하는 것은 상대적으로 간단하지만, 저는 WeChat API를 한번도 접해본 적이 없습니다.

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

이 기사는 WeChat JSSDK를 사용하여 이미지를 업로드하는 방법을 공유합니다. 앞으로의 작업과 학습에 도움이 되기를 바랍니다. 귀하의 경험을 공유해 주셔서 감사합니다.