调用微信JS-SDK上传图片爬坑之路
2017-10-30 22:20
351 查看
最近最用 vue 开发微信服务号 ,也是第一次调用微信的sdk , ( 先吐槽下自己 断断续续的整理一个星期才搞出来 ) 日了狗了 ,坑太多 , 更多是 ios 不兼容 ,图片不显示呀 , 不能上传多张啦 这里就可以帮你解决 ! 废话不多说 直接上代码 :
第一步 :首先你得引人 文件:
http://res.wx.qq.com/open/js/jweixin-1.2.0.js (目前最新版本)
支持使用 AMD/CMD 标准模块加载方法加载 同时也支持 npm 安装
第二步:通过config接口注入权限验证配置 (获取签名)
getUrlConfig 方法里面得
let wiexin = apiRouter.GET_CONFIG + encodeURIComponent(this.urlPath)
apiRouter.GET_CONFIG :这个是我 url 定义得常量
encodeURIComponent :可把字符串作为URI 组件进行编码
this.urlPath : 当前得url
这个时候就可以看到成功与否了!
第三步 : 选择图片
然后你们自己看吧
到这里程序就以及完成了 , 代码可以直接 复制用 !
经测试 android ios 都兼容
第一步 :首先你得引人 文件:
http://res.wx.qq.com/open/js/jweixin-1.2.0.js (目前最新版本)
支持使用 AMD/CMD 标准模块加载方法加载 同时也支持 npm 安装
第二步:通过config接口注入权限验证配置 (获取签名)
getUrlConfig(){ let wiexin = apiRouter.GET_CONFIG + encodeURIComponent(this.urlPath) this.$http.get(wiexin).then(response => { let data = response.body wx.config({ // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.nonceStr, // 必填,生成签名的随机串 signature: data.signature,// 必填,签名,见附录1 jsApiList: ["chooseImage", "uploadImage", "downloadImage",] // 必填,需要使用的JS接口列表 }); wx.error(function (res) { alert(res) }); }, response => { // console.log("请求失败了!!!!") }); },
getUrlConfig 方法里面得
let wiexin = apiRouter.GET_CONFIG + encodeURIComponent(this.urlPath)
apiRouter.GET_CONFIG :这个是我 url 定义得常量
encodeURIComponent :可把字符串作为URI 组件进行编码
this.urlPath : 当前得url
这个时候就可以看到成功与否了!
第三步 : 选择图片
onClickUp(){ let _this = this; wx.chooseImage({ count: _this.imgaesMaxLenght - _this.localIdImgs.length, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { let localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 // 判断 ios if (window.__wxjs_is_wkwebview) { _this.wxgetLocalImgData(localIds); }else{ localIds.forEach((item, index) => { _this.localIdImgs.push(item); if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){ _this.imgLenght = false } }); } _this.wxuploadImage(localIds); }, fail: function (res) { console.log("失败") } }); }
然后你们自己看吧
wxuploadImage(localIds) { let _this = this; var i = 0; var length = localIds.length; var upload = function() { let loacId = localIds[i]; if (window.__wxjs_is_wkwebview) { if (loacId.indexOf("wxlocalresource") != -1) { loacId = loacId.replace("wxlocalresource", "wxLocalResource"); } } wx.uploadImage({ localId: loacId, // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { // alert(res.serverId); var serverId = { id:'', serverid:res.serverId } _this.serverId.push(serverId); i++; i < length && upload(); }, fail: function (error) { alert("失败11") } }); } upload(); }, wxgetLocalImgData(localIds){ let _this = this; var i = 0; var length = localIds.length; var upload = function() { wx.getLocalImgData({ localId: localIds[i], // 图片的localID success: function (res) { let localData = res.localData; // localData是图片的base64数据,可以用img标签显示 localData = localData.replace('jgp', 'jpeg'); _this.localIdImgs.push(localData); if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){ _this.imgLenght = false } i++; i < length && upload(); } }); } upload(); },
到这里程序就以及完成了 , 代码可以直接 复制用 !
经测试 android ios 都兼容
相关文章推荐
- 调用微信JS-SDK接口上传图片
- 微信js-sdk图片上传下载——java完整流程
- thinkphp微信开发之jssdk图片上传并下载到本地服务器
- 后台下载微信js sdk上传的图片
- 微信js-sdk图片接口实现一键上传.md
- 微信js-sdk上传多个图片
- 使用微信JS-SDK上传图片,下载
- 微信js sdk上传多张图片
- java调用微信sdk图片选择上传保存到七牛
- thinkphp微信开发之jssdk图片上传并下载到本地服务器
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(二 、上传图片服务器操作)
- 微信JS-SDK加载验证流程和手机图片上传
- 调用微信JS上传照片接口上传图片
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)
- 微信js-sdk 上传图片、下载图片接口
- ThinkPHP微信开发实例——JSSDK图像接口上传下载并将图片流写入本地
- PHP调用微信JS-SDK接口上传头像保存到服务器
- 微信js-sdk,选择图片,上传,下载到本地,php服务端
- 微信js-sdk上传与下载图片接口用法示例
- 微信JS-SDK加载验证流程和手机图片上传