Il n'y a pas si longtemps, WeChat a publié quelques interfaces, parmi lesquelles il existe une interface uploadImage pour télécharger des images, qui est généralement utilisée en conjonction avec l'interface ChooseImage. Appelez d'abord l'interface ChooseImage pour permettre à l'utilisateur de sélectionner une ou plusieurs images. Une fois que l'utilisateur a terminé la sélection, WeChat renverra l'ID de l'image sélectionnée, puis transmettra l'ID de l'image à l'interface uploadImage pour télécharger l'image.
Un projet sur lequel j'ai travaillé récemment utilisait JSSDK. Trions les éléments utilisés.
Joignez d'abord le lien vers la documentation du développeur WeChat : Documentation du développeur WeChat
Principalement utilisé :
Présenter les fichiers JS
Introduisez le fichier JS suivant dans la page qui doit appeler l'interface JS (https est pris en charge) : http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Nous devons obtenir les paramètres 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; }
Il est à noter que le nombre d'appels vers l'interface est limité et doit être contrôlé.
Configuration des pages
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: [] };
Interface pour prendre des photos ou sélectionner des photos dans l'album du téléphone portable
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 } });
Interface de téléchargement d'images
wx.uploadImage({ localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID } });
Pour l'ID de serveur renvoyé par WeChat, nous devons obtenir les données binaires de l'image réelle via l'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 ""; }
Dans l'ensemble, il est relativement simple d'implémenter cette fonction, mais je n'ai jamais été exposé à l'API WeChat auparavant.
WeChat jssdk télécharge plusieurs photos
Le code est le suivant :
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); } } }); };
Cet article partage avec vous la méthode de téléchargement d'images avec WeChat JSSDK. J'espère qu'il vous sera utile dans vos futurs travaux et études. Bien sûr, il y en a plus que les méthodes ci-dessus. sont invités à partager votre expérience.