来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

微信JSSDK上传图片,sdk选取照片上传

前不久微信公开了一些接口,当中有一个uploadImage接口用于上传图片,一般和chooseImage接口同盟使用。先调用chooseImage接口让客户挑选一张大概多张图纸,客商选取截止后微信会重返被入选图片的id,再把图片id传给uploadImage接口上传图片。

微信JS-SDK选用手提式有线电话机照片上传功能,js-sdk选拔照片上传

品类中碰着要求采纳照片上传的必要,因为网页运营在微信的浏览器里面,所以用微信的 js-sdk 提供的挑选照片效果,来进行项目开荒。实际支出中须要采纳微信web开辟者工具,详细参照他事他说加以考察链接:

1.配置微信JS-SDK相关文书

1)、JSSDk使用最新的1.2.0版本:

  ios网页开采适配难题:

  变化:1.2.0之下版本的JSSDK不再补助通过运用chooseImage api重返的localld以如:"img src=wxLocalResource://50114659二零一一32”的措施预览图片。

  适配提议:直接将JSSDK晋级为1.2.0新型版本就能够扶助页面自动适配,但在部分情景下恐怕不算,此时得以采纳getLocalImgData 接口来直接获取数据。

(后附详解代码)

2)、jsapiSign.js文件:

/**
 * 使用jssdk接口的页面,必须引用该文件
 * actionUrl:后台服务请求地址
 * url:微信jssdk授权页面地址
 */
$.post("/getJsapiSign", {'url':location.href.split('#')[0]}, function(data) {
 wx.config({
 debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId : data.appid, // 必填,公众号的唯一标识
 timestamp : data.timestamp, // 必填,生成签名的时间戳
 nonceStr : data.noncestr, // 必填,生成签名的随机串
 signature : data.signature,// 必填,签名,见附录1
 jsApiList : [ 'checkJsApi',
  'onMenuShareTimeline',
  'onMenuShareAppMessage',
  'onMenuShareQQ',
  'onMenuShareWeibo',
  'hideMenuItems',
  'showMenuItems',
  'hideAllNonBaseMenuItem',
  'showAllNonBaseMenuItem',
  'translateVoice',
  'startRecord',
  'stopRecord',
  'onRecordEnd',
  'playVoice',
  'pauseVoice',
  'stopVoice',
  'uploadVoice',
  'downloadVoice',
  'chooseImage',
  'previewImage',
  'uploadImage',
  'downloadImage',
  'getNetworkType',
  'openLocation',
  'getLocation',
  'hideOptionMenu',
  'showOptionMenu',
  'closeWindow',
  'scanQRCode',
  'chooseWXPay',
  'openProductSpecificView',
  'addCard',
  'chooseCard',
  'openCard',
  'getLocalImgData'
 ]
 });

 wx.error(function(res) {
 alert("wx.config加载失败");
 });
}, 'json');

2.实际贯彻进程

1)、选取照片

那边运用微信 js-sdk 的 chooseImage 方法,获得照片在地点存款和储蓄的 id,拾分简短:

2)、获取照片数量

据他们说微信的官方开垦文书档案,获得的 localId 能够直接当做 img 成分的 src 属性实行体现

3)、照片上传

此间运用微信 js-sdk 的 uploadImage 方法

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: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
   var medias = {'lid':localIds[0].toString(), 'sid':res.serverId};
   $('#img_media').attr('src', medias.lid);
  },fail:function(res){
   alert("上传失败");
  }
  });
 }
});

3.iOS WKWebview 网页开采适配

JSAPI相关适配

1)、将不再辅助cache

调换:在WKWebview大校暂不扶助cache jsapi。

适配建议:全数应用此api的开拓者可去掉页面相关逻辑。

2)、页面通过LocalID预览图片

变动:1.2.0以下版本的JSSDK不再扶助通过选取chooseImage api重临的localld以如:”img src=wxLocalResource://50114659二零一二32”的情势预览图片。

适配提议:间接将JSSDK晋级为1.2.0流行版本就可以扶助页面自动适配,但在一些面貌下或者没用,此时能够利用getLocalImgData 接口来一向获取数据。

(目前JSSDk线上版本是 1.0.0 和 1.1.0,更新版本为1.2.0 ,  )

if (window.__wxjs_is_wkwebview) {
 wx.getLocalImgData({
 localId: localIds[0], // 图片的localID
 success: function (res) {
  var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
  localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据,类型为 image/jgp,因此需要替换一下
  $('#img_media').attr('src', localData);
 },fail:function(res){
  alert("显示失败");
 }
 });
}

三、有利用JSSDK,况且利用了wx.config举办权力授权需关怀jsapi调用的曲折难点

转移:WKWebview的在这之中贯彻转移使大家对微信内的页面jsapi权限管理做了一定逻辑上的调动,有十分的小也许会时有发生原先授权正常的jsapi获取权力不正规,进而导致调用jsapi退步。

适配提出:

1. iOS微信6.5.1,WKWebview在此版本中已知有以下难题:页面使用HTML5的History API pushState; popstate;      replaceState等决定页面导航(标准的如单运用页面),同一时间接选举取JSSDK的wx.config为jsapi授权,此时大概率会出现jsapi因为无权力而调用失利的题目。 在6.5.第11中学页面若恐怕的情状下,可使用Anchor hash技能替换History技能来解决此难点。

  1. iOS微信6.5.2会同之后版本,将不会设有上述难点,但不能够百分百鲜明有利用到 history或hash技能转移页面导航地址的页面完全未有此类主题材料,照旧供给开采者注意关注此类难点。

本文已被整理到了《JavaScript微信支付技能汇总》,款待大家学习阅读。

为大家推荐现在关注度相比较高的微信小程序教程一篇:《微信小程序开垦教程》作者为大家留意整理的,希望喜欢。

以上就是本文的全体内容,希望对我们的读书抱有援救,也期望大家多多扶助帮客之家。

项目中遇到要求选用照片上传的供给,因为网页运维在微信的浏览器里面,所以用微信...

新近做的三个品种,刚好用到了JSSDK,把用到的东西收拾下。

先附上微信开垦者文书档案链接:微信开辟者文书档案

第一运用了:

引入JS文件

在急需调用JS接口的页面引进如下JS文件,(帮助https):

小编们供给获得微信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上传图片的法子,希望对我们从此的干活学习抱有扶助,当然方法也不断上述一种,还会有许多,款待大家多多分享本身的阅历。

您恐怕感兴趣的小说:

  • 微信分享调用jssdk实例
  • 详解nodejs微信jssdk后端接口
  • 至于微信jssdk实现多图片上传的一些体会分享
  • php一个文本消除微信jssdk配置
  • 微信+angularJS的SPA应用中用router实行页面跳转,jssdk校验失利难点化解
  • 微信jssdk用法汇总
  • 微信JSSDK多图片上传而且消除IOS系统上传平素加载的难题
  • 微信jssdk在iframe页面失效难点的缓和方法
  • 微信JSSDK调用微信扫一扫功效的不二等秘书诀

本文由六合联盟网发布于系统操作,转载请注明出处:微信JSSDK上传图片,sdk选取照片上传

关键词: