一.首先在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,实现多图上传的一点心得相关推荐

  1. 微信公众号 多图上传

    最近弄微信公众号对接,需要调用微信接口,多图上传 <div style="display: flex; align-items: center;" class="w ...

  2. php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能

    最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...

  3. 微信小程序多图上传带进度提示的代码实例

    实例名称:多图上传进度提示 适用范围:微信小程序 基础库1.0.1及以上 page.js中书写代码片段如下 Page({data:{src:''},//上传事件upImage(e){wx.choose ...

  4. 小程序 | 微信小程序多图上传(点击上传、可修改删除与放大回显)

    微信小程序实现多图上传需求 文章目录 基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...

  5. 微信小程序 多图上传解决方案

    为了使代码体积小 我这里将多图上传 封装到单独的一个js 页面的js调用他 // pages/home/home.jsvar upload = require('../../style/upload. ...

  6. 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器

    在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆 微信公众号开发<二>发送模板消息实现消息业务实 ...

  7. 微信小程序多图上传/朋友圈传图效果【附完整源码】

    效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...

  8. 基于Taro的微信小程序多图上传

    // 上传佐证组件代码 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' ...

  9. 仿微信朋友圈9图上传选择器

    本人最新公众号<Android百科全书>,汇集了各个公众号的优秀文章,进行分类整理,让大家能够更方便的查阅,希望大家多多支持,来个关注奥. 这个开源项目,之前就想写,一直没有时间整理,这次 ...

最新文章

  1. 美国辛辛那堤儿童医学中心招生物信息博士, 博士后和访问学者——单细胞转录组和表观方向...
  2. php文件用什么浏览,什么是PHP文件 php文件用什么打开
  3. 上凸包和下凸包_使用凸包聚类
  4. 美女面试官问我Python如何优雅的创建临时文件,我的回答....
  5. Spring cloud学习总结
  6. Unicode 和 UTF-8 之间的关系
  7. B 站 Up 主自制秃头生成器,圆你秃头梦想可好?
  8. a标签js阻止跳转_前端笔试知识点:阻止冒泡
  9. aspectjweaver.jar 下载地址
  10. php静态地图api,全景静态图API
  11. c语言逻辑运算符用法大全,C语言逻辑运算符介绍和示例
  12. php flash 代码转换,php+flashpaper实现文档自动转换
  13. java 之DelayQueue实际运用示例
  14. 投资学翻译2 Digesting Anomalies An Investment Approach
  15. android监听卡1电话,Android 监听 SIM 卡状态
  16. 找工作必看!!!关于什么叫做三方协议
  17. 普通计算机怎么算根号_「根号计算器」12、计算机如何实现开根号? - seo实验室...
  18. 【Scratch二次开发】06-修改界面字体大小
  19. ios开发 静音键设置_IOS 静音开关检测
  20. 给游戏设计新人的一些建议

热门文章

  1. python要不要装pycharm-Python和pyCharm安装
  2. python多久学会自学-python自学多久
  3. python随机画散点图-Python使用Plotly绘图工具,绘制散点图、线形图
  4. python编程100例头条-Python 爱好者专用技术头条
  5. python下载的库要放到哪里-python库在哪里下载?怎么安装?
  6. 为什么叫python编程-python为什么叫爬虫
  7. python画折线图详解-利用python画出折线图
  8. python画饼图-从零开始学Python--matplotlib(饼图)
  9. python学成需要多久-小白学python怎么快速入门?多久能完成一个项目?
  10. python对象编程例子-这是我见过最详细的Python面向对象编程!建议收藏!