微信jssdk,实现多图上传的一点心得
一.首先在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,实现多图上传的代码,因为每个人的需求不尽相同,有的部分代码被我删除,希望能帮到大家!
转载于:https://www.cnblogs.com/lnimpossible/p/6170486.html
微信jssdk,实现多图上传的一点心得相关推荐
- 微信公众号 多图上传
最近弄微信公众号对接,需要调用微信接口,多图上传 <div style="display: flex; align-items: center;" class="w ...
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...
- 微信小程序多图上传带进度提示的代码实例
实例名称:多图上传进度提示 适用范围:微信小程序 基础库1.0.1及以上 page.js中书写代码片段如下 Page({data:{src:''},//上传事件upImage(e){wx.choose ...
- 小程序 | 微信小程序多图上传(点击上传、可修改删除与放大回显)
微信小程序实现多图上传需求 文章目录 基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...
- 微信小程序 多图上传解决方案
为了使代码体积小 我这里将多图上传 封装到单独的一个js 页面的js调用他 // pages/home/home.jsvar upload = require('../../style/upload. ...
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆 微信公众号开发<二>发送模板消息实现消息业务实 ...
- 微信小程序多图上传/朋友圈传图效果【附完整源码】
效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...
- 基于Taro的微信小程序多图上传
// 上传佐证组件代码 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' ...
- 仿微信朋友圈9图上传选择器
本人最新公众号<Android百科全书>,汇集了各个公众号的优秀文章,进行分类整理,让大家能够更方便的查阅,希望大家多多支持,来个关注奥. 这个开源项目,之前就想写,一直没有时间整理,这次 ...
最新文章
- 美国辛辛那堤儿童医学中心招生物信息博士, 博士后和访问学者——单细胞转录组和表观方向...
- php文件用什么浏览,什么是PHP文件 php文件用什么打开
- 上凸包和下凸包_使用凸包聚类
- 美女面试官问我Python如何优雅的创建临时文件,我的回答....
- Spring cloud学习总结
- Unicode 和 UTF-8 之间的关系
- B 站 Up 主自制秃头生成器,圆你秃头梦想可好?
- a标签js阻止跳转_前端笔试知识点:阻止冒泡
- aspectjweaver.jar 下载地址
- php静态地图api,全景静态图API
- c语言逻辑运算符用法大全,C语言逻辑运算符介绍和示例
- php flash 代码转换,php+flashpaper实现文档自动转换
- java 之DelayQueue实际运用示例
- 投资学翻译2 Digesting Anomalies An Investment Approach
- android监听卡1电话,Android 监听 SIM 卡状态
- 找工作必看!!!关于什么叫做三方协议
- 普通计算机怎么算根号_「根号计算器」12、计算机如何实现开根号? - seo实验室...
- 【Scratch二次开发】06-修改界面字体大小
- ios开发 静音键设置_IOS 静音开关检测
- 给游戏设计新人的一些建议
热门文章
- python要不要装pycharm-Python和pyCharm安装
- python多久学会自学-python自学多久
- python随机画散点图-Python使用Plotly绘图工具,绘制散点图、线形图
- python编程100例头条-Python 爱好者专用技术头条
- python下载的库要放到哪里-python库在哪里下载?怎么安装?
- 为什么叫python编程-python为什么叫爬虫
- python画折线图详解-利用python画出折线图
- python画饼图-从零开始学Python--matplotlib(饼图)
- python学成需要多久-小白学python怎么快速入门?多久能完成一个项目?
- python对象编程例子-这是我见过最详细的Python面向对象编程!建议收藏!