微信JSSDK上传图片
字体：[ ] 类型：转载 时间：
做过微信开发的都知道，在部分android机型里微信不支持网页上传图片的，这是由于这些机型的文件上传存在内存泄漏，会导致微信闪退，所以微信内置浏览器将文件上传屏蔽，本篇文章给大家介绍使用微信jssdk如何上传图片，需要的朋友可以关注下
前不久微信公开了一些接口，其中有一个uploadImage接口用于上传图片，一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片，用户选择完毕后微信会返回被选中图片的id，再把图片id传给uploadImage接口上传图片。
最近做的一个项目，刚好用到了JSSDK，把用到的东西整理下。
先附上微信开发者文档链接：
主要用到了：
引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：
我们需要获取微信js-sdk参数
* 获取access_token
* @param appid
* @param appsecret
public static WxAccessToken getAccessToken() {
WxAccessToken accessToken =
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) {
accessToken = new WxAccessToken();
accessToken.setToken(jsonObject.getString("access_token"));
accessToken.setExpiresIn(jsonObject.getInt("expires_in"));
} catch (JSONException e) {
accessToken =
// 获取token失败
log.error("获取token失败 errcode:{} errmsg:{}",
jsonObject.getInt("errcode"),
jsonObject.getString("errmsg"));
return accessT
public static String jsapiTicket = "https://api./cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
* 获取JsTicket
* @param accessToken
accessToken
public static WxJsTicket getJsTicket(String accessToken) {
WxJsTicket jsTicket =
String url = jsapiTicket.replaceAll("ACCESS_TOKEN", accessToken);
JSONObject jsonObject = httpRequest(url, "GET", null);
// 如果请求成功
if (null != jsonObject) {
jsTicket = new WxJsTicket();
jsTicket.setTicket(jsonObject.getString("ticket"));
jsTicket.setExpiresIn(jsonObject.getInt("expires_in"));
} catch (JSONException e) {
jsTicket =
// 获取token失败
log.error("获取jsapiTicket失败 errcode:{} errmsg:{}",
jsonObject.getInt("errcode"),
jsonObject.getString("errmsg"));
return jsT
需要注意接口的调用次数是有限制的，需要控制好。
页面的配置
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.localI // 返回选定照片的本地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./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 =
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 上传多张图片
代码如下：
$('#filePicker').on('click', function () {
wx.chooseImage({
success: function (res) {
var localIds = res.localI
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上传图片的方法，希望对大家今后的工作学习有所帮助，当然方法也不止以上一种，还有很多，欢迎大家多多分享自己的经验。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在手机微信里怎么看自己发的照片_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
在手机微信里怎么看自己发的照片
我有更好的答案
点【发现】，【朋友圈】，进去后就可以看到自己的背景，自己的背景右下角就是自己的头像，点自己的头像就是自己发的照片了.
采纳率：68%
来自团队：
为您推荐：
其他类似问题
等待您来回答