微信jssdk上传图片java_微信JSSDK上传图片_javascript技巧

ゞ浴缸里的玫瑰 2022-11-09 06:03 214阅读 0赞

前不久微信公开了一些接口，其中有一个uploadImage接口用于上传图片，一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片，用户选择完毕后微信会返回被选中图片的id，再把图片id传给uploadImage接口上传图片。

最近做的一个项目，刚好用到了JSSDK，把用到的东西整理下。

先附上微信开发者文档链接：微信开发者文档

主要用到了：

引入JS文件

我们需要获取微信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

\});

微信返回的serverid我们需要通过微信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 "";

整体上做这个功能还是比较简单的，只不过以前没有接触过微信api。

微信 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);

\});

\};

本文给大家分享了微信JSSDK上传图片的方法，希望对大家今后的工作学习有所帮助，当然方法也不止以上一种，还有很多，欢迎大家多多分享自己的经验。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

微信jssdk上传图片java_微信JSSDK上传图片_javascript技巧

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序如何上传图片

相关微信小程序上传图片/文件

相关微信jssdk上传图片java_微信JSSDK上传图片_javascript技巧

相关微信jssdk总结

相关微信公众平台上传图片，自动回复图片

相关微信JSSDK说明文档

相关微信小程序上传图片

相关微信小程序开发—(四)上传图片

相关微信小程序单张本地图片上传，拍摄图片上传

相关微信服务号开发之jssdk-照片上传、下载总结