关于微信jssdk实现多图片上传的一点心得分享

2024-12-21 10:58:57

一.首先在common.js里封装一个函数，在需要调用jsSDK的页面引用此方法即可实现微信的信息配置

function signatureJSSDK() {
 var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数
 $.ajax({
 url:IPWeiXinJssdk,//调用后台接口，用后台返回的结果来进行微信接口的基础配置
 type:"post",
 dataType:"json",
 data:{"url":url},
 success:function (result) {
  if (result) {
　　　　　　　　　//后台接口调用成功，开始配置微信
  wx.config({
   debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   appId : result.appid, // 必填，公众号的唯一标识
   timestamp : result.timestamp, // 必填，生成签名的时间戳
   nonceStr : result.noncestr, // 必填，生成签名的随机串
   signature : result.signature,// 必填，签名，见附录1
   jsApiList : [// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
   /*
    * 所有要调用的 API 都要加到这个列表中
    * 这里以图像接口为例
    */
   "chooseImage",
   "previewImage",
   "uploadImage",
   "downloadImage" ]
  });
  }
 }
 })
}
//微信配置失败会执行wx.error函数
wx.error(function(res) {
 confirmBox2("wx.config.error");
 console.log(res);
});

二.在需要使用微信多图上传的页面编写如下代码

$(function () {
 signatureJSSDK();//微信jssdk配置
 // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
 // 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
 wx.ready(function() {//微信配置成功执行此函数
　　　　　　　　　//localIdsArr 用来存放localIds，serverIdsArr用来存放serverIds
  var localIdsArr = [];var serverIdsArr = [];
  $(".BImgContent").click(function () {//点击事件触发微信拍照
  var that = $(this);
  wx.chooseImage({//调用微信拍照功能
   count: 1, // 默认9
   sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
   success: function(res) {
   localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
   $(that).find(".ago").attr('src', localIds);//本地预览，localIds可以当做img标签的src属性
   wx.uploadImage({//用户预览的同时，上传至微信服务器
    localId:""+localIds,
    success: function(res) {
    var i =0;
    if($(that).hasClass("img1")){
     i = 1;
    }else if($(that).hasClass("img2")){
     i = 2;
    }else if($(that).hasClass("img3")){
     i = 3;
    }
    localIdsArr[i] = localIds;//将此图片的localIds存入数组
    serverIdsArr[i] = res.serverId;//将此图片在微信服务器上的werverID存入数组
    }
   });
   }
  });
  });
  $("#nextStep").click(function () {//用户点击下一步时，调用后台接口，传给后台serverIdsArr，后台可通过此id从微信服务器下载这些图片到后台
  var flag = 0;
  $(".ago").each(function (index,val) { //判断前台页面需要上传的部分是否都上传完
   var localIds = $(val).attr("src");
   if(localIds === "./img/photoAddContent1.png"){
   flag = 1;
   return false;
   }
  });
  if(flag === 0){//验证通过，传送serverID至后台
//   alert("开始发送serverID至后台");
   $(this).unbind("click");
   for(var i=0;i<serverIdsArr.length;i++){
   pushSeverId(serverIdsArr[i]);
   }
  }else{
   confirmBox2("请完善以上资料");
  }
  });
 });
 //将serverId发至后台，后台从微信服务器下载图片，然后反馈图片在我们服务器上的相对路径
 var urlList = [];
 function pushSeverId(serverId) {
  $.post('http://XXX.XXX', { serverId: serverId },function (text, status) {
  var obj = {"imgStr":"","imgType":""};
  obj.imgStr = text;//text为后台返回的图片url
  urlList.push(obj);
//  alert(JSON.stringify(urlList));//可以在手机上打印此数组，调试用，看看是否全部上传成功
  });
 }
 })

　　以上是我在使用微信jssdk，实现多图上传的代码，因为每个人的需求不尽相同，有的部分代码被我删除，希望能帮到大家！如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信jssdk在iframe页面失效问题的解决措施

项目需求微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行放大缩小移动旋转等操作,点击确定按钮将编辑好的图片发送到服务器存成图片遇到的问题当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的选择图片接口,其他jssdk中的接口也无法正常工作.但是单独打开子页面可以正
详解nodejs微信jssdk后端接口

写过了两个微信的页面,遇到了挺多不会的问题,当时也是自己边查资料,边实践完成了简单的需求,刚好现在有空,把之前的东西整理一遍. 与普通的手机页面不同的是,微信页面提供给你了调用微信APP内置功能的接口,可以实现更复杂的功能. jssdk的前端使用前端页面调用jssdk首先要通绑定"公众号设置"的"功能设置"里填写"JS接口安全域名" 然后在页面中引入http://res.wx.qq.com/open/js/... 调用 wx.config({.
微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决

今天偶然的把微信jssdk的debug打开后,发现调试信息总是提示签名错误,感情前两天api的"偶尔"不生效,不是因为还没执行代码,而是因为签名没正确啊!,这就是个100%可以重现的错误但只要这个SPA刚刷新过,或加载完后中途没有跳转,,签名就会是正确的. 而当路由发生改变,我们对新"跳转"的页面重新签名之后,却出现了签名错误,而我们的签名明明是正确的,把各种参数拿去微信JS签名校验工具(http://mp.weixin.qq.com/debug/cgi-bin/
php一个文件搞定微信jssdk配置

php一个文件搞定微信jssdk配置: 包括缓存,包括https通讯,获取微信access_token,签名什么的都有.但是防范性编程做得比较少,商业用的话,需要完善下代码. 使用姿势 ^ajax(Common.ServerUrl + "GetWX.php", { data: { Type: "config", url: location.href.split('#')[0] }, dataType: 'json', type: 'get', timeout: 50
微信JSSDK上传图片

前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用.先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给uploadImage接口上传图片. 最近做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发者文档链接:微信开发者文档主要用到了: 引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq
微信分享调用jssdk实例

网页在微信中打开,进行分享,详细过程 1.问题说明搞了半天,终于搞定.说下基本需求,很简单,网页在微信中打开,分享. 网页是html格式,原来分享时会一直显示链接,看了下代码中没有调用jssdk,调用的是一个第三方的平台的分享接口. 2.问题解析根据微信官方给出的demo,可以看到核心就是获取四个参数,配置wx.config. 四个参数分别是appId.timestamp.nonceStr.signature appId不用说,后面三个都是根据微信的接口得到的,有兴趣的可以看下官方,不过也可
微信JSSDK调用微信扫一扫功能的方法

如何利用微信JSSDK调用微信扫一扫功能?具体内容如下 1. 确保有调起微信扫一扫接口权限,测试号可能不行: 2. 导入相关JS <script type="text/javascript" http://test.com/zepto_touch.js"></script> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweix
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片
微信jssdk用法汇总

本文针对微信jssdk用法进行了详细汇总,分享给大家,供大家参考,具体内容如下 1.绑定域名 2.引入js文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK 3.通过config接口注入权限验证
关于微信jssdk实现多图片上传的一点心得分享

一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置 function signatureJSSDK() { var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数 $.ajax({ url:IPWeiXinJssdk,//调用后台接口,用后台返回的结果来进行微信接口的基础配置 type:"post", dataType:"json", data
微信小程序实现图片上传、删除和预览功能的方法

本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i
tp5实现微信小程序多图片上传到服务器功能

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中:  <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im
微信小程序实现图片上传放大预览删除代码

本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下效果: image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { var that = this; var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function () {
微信小程序实现图片上传功能

本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下前端:微信开发者工具后端:.Net 服务器:阿里云这里介绍微信小程序如何实现上传图片到自己的服务器上前端代码 data: { productInfo: {} }, //添加Banner bindChooiceProduct: function () { var that = this; wx.chooseImage({ count: 3, //最多可以选择的图片总数 sizeType: ['compress
微信小程序实现图片上传

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下/p> 图片上传服务器: wxml <view class="container"> <button bindtap='chooseImageTap'>上传图片</button> </view> wxss Page({ /** * 页面的初始数据 */ data: { imgs: [],//本地图片地址数组 picPaths:[],//网络路径 },
Java微信小程序oss图片上传的实现方法

先将图片上传到服务器,再将服务器上的图片传入oss中小程序js //启动上传等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }) //上传图片 wx.uploadFile({ url: '***********',//上传的路径(Java后台路径) filePath: tempFilePaths[0], name: 'file', success: function (re
微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于
Angular2仿照微信UI实现9张图片上传和预览的示例代码

本来在看vue.js没多久,最近在赶一个项目用回了angular2,还是先把ng2搞定吧,毕竟还不怎么懂.这两天我做的是用户表单数据的提交,大部分很简单,双向绑定就完事了,主要还是沟通的问题哈哈哈哈,虽然沟通的时候有点暴躁想甩锅,不过出了门还是高高兴兴吃饭高高兴兴回去. 好了切入问题.这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能,要求图片1--9张.下面来记录下如何实现微信的图片预览/删除功能. 样式--weui.css 样式用的是微信官方ui,weui.min.css
微信小程序实现图片上传功能实例（前端+PHP后端）

前言几乎每个程序都需要用到图片.下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style=

关于微信jssdk实现多图片上传的一点心得分享

相关推荐

随机推荐