当前位置：首页 > 资讯 > 技术文档

微信JS-SDK选取手机照片上传功能

时间：2022-04-26 08:06 编辑：来源：阅读：
扫一扫，手机访问

摘要：微信JS-SDK选取手机照片上传功能

项目中遇到需要选取照片上传的需求，因为网页运行在微信的浏览器里面，所以用微信的 js-sdk 提供的选取照片功能，来进行项目开发。实际开发中需要用到微信web开发者工具，详细参考链接：[url=https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html]https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html[/url]。 [b]1.配置微信JS-SDK相关文件[/b] 1）、JSSDk使用最新的1.2.0版本：[url=https://res.wx.qq.com/open/js/jweixin-1.2.0.js]https://res.wx.qq.com/open/js/jweixin-1.2.0.js[/url]。　　ios网页开发适配问题：　　变化：1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如："img src=wxLocalResource://50114659201332”的方式预览图片。　　适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用[url=https://mp.weixin.qq.com/advanced/wiki?t=t=resource/res_main&id=mp1421141115]getLocalImgData [/url]接口来直接获取数据。（后附详解代码） 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');

[b]2.具体实现过程[/b] 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("上传失败");
  }
  });
 }
});

[b]3.iOS WKWebview 网页开发适配 [/b] JSAPI相关适配 1）、将不再支持cache 变化：在WKWebview中将暂不支持cache jsapi。适配建议：所有使用此api的开发者可去掉页面相关逻辑。 2）、页面通过LocalID预览图片变化：1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如：”img src=wxLocalResource://50114659201332”的方式预览图片。适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用[url=https://mp.weixin.qq.com/advanced/wiki?t=t=resource/res_main&id=mp1421141115]getLocalImgData [/url]接口来直接获取数据。（目前JSSDk线上版本是 1.0.0 和 1.1.0，更新版本为1.2.0 ，[url=https://res.wx.qq.com/open/js/jweixin-1.2.0.js]https://res.wx.qq.com/open/js/jweixin-1.2.0.js[/url] ）

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("显示失败");
 }
 });
}

[b]三、有使用JSSDK，并且使用了wx.config进行权限授权需关注jsapi调用的失败问题 [/b] 变化：WKWebview的内部实现变更使我们对微信内的页面jsapi权限管理做了一定逻辑上的调整，有极小可能会发生以前授权正常的jsapi获取权限不正常，从而导致调用jsapi失败。 [b]适配建议：[/b] 1. iOS微信6.5.1，WKWebview在此版本中已知有以下问题：页面使用HTML5的History API pushState; popstate; replaceState等控制页面导航（典型的如单应用页面），同时使用JSSDK的wx.config为jsapi授权，此时大几率会出现jsapi因为无权限而调用失败的问题。在6.5.1中页面若可能的情况下，可使用Anchor hash技术替换History技术来解决此问题。 2. iOS微信6.5.2及其之后版本，将不会存在以上问题，但不能100%确认有使用到 history或hash技术更改页面导航地址的页面完全没有此类问题，依然需要开发者注意关注此类问题。本文已被整理到了《[url=http://www.1sucai.cn/Special/879.htm]JavaScript微信开发技巧汇总[/url]》，欢迎大家学习阅读。为大家推荐现在关注度比较高的微信小程序教程一篇：[url=http://www.1sucai.cn/Special/900.htm]《微信小程序开发教程》[/url]小编为大家精心整理的，希望喜欢。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
下一篇：javascript实现客户端兼容各浏览器创建csv并下载的方法

资讯排行榜
更多>>