WeChat JSSDK アップロード写真_JavaScript スキル

少し前に、WeChat はいくつかのインターフェイスをリリースしました。その中には、画像をアップロードするための UploadImage インターフェイスがあり、通常はchooseImage インターフェイスと組み合わせて使用​​されます。まず、chooseImage インターフェイスを呼び出して、ユーザーが 1 つ以上の写真を選択できるようにします。ユーザーが選択を完了すると、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 で画像をアップロードする方法を紹介します。もちろん、上記以外にもさまざまな方法があります。あなたの経験を共有してください。