ホームページ > ウェブフロントエンド > jsチュートリアル > WeChat JSSDK アップロード写真_JavaScript スキル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:43:23
オリジナル
1824 人が閲覧しました

少し前に、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 パラメータを取得する必要があります

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

/**

 * 获取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;

}

ログイン後にコピー

インターフェイスへの呼び出しの数は制限されており、制御する必要があることに注意してください。

ページ構成

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

 };

ログイン後にコピー

写真を撮ったり、携帯電話のアルバムから写真を選択したりするためのインターフェース

1

2

3

4

5

6

7

8

wx.chooseImage({

  count: 1, // 默认9

  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

  success: function (res) {

    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

  }

});

ログイン後にコピー

画像のアップロードインターフェース

1

2

3

4

5

6

7

wx.uploadImage({

  localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得

  isShowProgressTips: 1, // 默认为1,显示进度提示

  success: function (res) {

    var serverId = res.serverId; // 返回图片的服务器端ID

  }

});

ログイン後にコピー

WeChat によって返されるサーバー ID については、WeChat API を通じて実際の画像バイナリ データを取得する必要があります。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

/**

 * 获取媒体文件

 

 * @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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

$('#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 で画像をアップロードする方法を紹介します。もちろん、上記以外にもさまざまな方法があります。あなたの経験を共有してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート