在这粘贴上三篇博文链接，方便大家查阅互相学习：
微信公众号开发《一》OAuth2.0网页授权认证获取用户的详细信息，实现自动登陆
微信公众号开发《二》发送模板消息实现消息业务实时通知
微信公众号开发《三》微信JS-SDK之地理位置的获取，集成百度地图实现在线地图搜索
本次讲解微信开发第四篇：调用微信JS-SDK实现上传手机图片到服务器，是非常常见的功能。如我们看到的用户上传头像
下面是本次要实现的效果图，支持预览，压缩上传（自带，可参数控制）
1.准备工作：工欲善其事，必先利其器，来看看开发该功能需要准备或了解什么
-
web开发工具：官方提供的开发工具，使用自己的微信号来调试微信网页授权、调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出。下载地址：web开发工具下载
-
开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
-
登录微信测试公众号，获取公众号的appID、appsecret，登录地址：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
一切就绪，我们知道要使用微信提供的JS-SDK，那就需要调通相关接口权限。关于任何调通，这里就不再次详细说明，不明白者可查看开头介绍的文章三：微信公众号开发《三》微信JS-SDK之地理位置的获取，集成百度地图实现在线地图搜索
2.代码示例，还是老规矩，文字介绍放在代码中，不单独介绍。
1）jsp部分代码，样式那些就不提供了，效果如图一
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>图片管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="baidu-tc-cerfication" content="315f7ed10c0de83badbd33934a33aec1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="telephone=no,email=no" name="format-detection">
<%@include file="includeJs.jsp" %>
<input type="hidden" id="timestamp" value="${siInfo.timestamp}">
<input type="hidden" id="nonceStr" value="${siInfo.noncestr}">
<input type="hidden" id="signature" value="${siInfo.signature}">
<input type="hidden" id="weixinOperId" value="${weixinOperId}">
</head>
<body>
<div class="weui-tab">
<div class="weui-tab__bd">
<div class="weui-tab__bd-item weui-tab__bd-item--active">
<div id="minheight" style="margin-bottom:55px;">
<ul id="" class="" style="padding:5px;">
<c:choose>
<c:when test="${fn:length(listPhoto)<=0}">
<div class="weui-uploader__bd">
<div class="weui-uploader__input-box">
<input id="uploaderInput" length="${fn:length(listPhoto)}" class="weui-uploader__input" type="button" accept="image/*" multiple="">
</div>
</div>
</c:when>
<c:otherwise>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles" style="">
<c:forEach items="${listPhoto}" var="photo">
<li class="weui-uploader__file weui-uploader__file_status" style="background-size:contain !important;background:url(${BS}${photo.photoUrl}) no-repeat center;">
<div class="weui-uploader__file-content">
<img vid="${photo.id}" osrc="${photo.photoUrl}" src="${BS}/images/weixin/FileInfo.png">
</div>
</li>
</c:forEach>
</ul>
<c:if test="${fn:length(listPhoto)<5}">
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="button" length="${fn:length(listPhoto)}" accept="image/*" multiple="">
</div>
</c:if>
</div>
</c:otherwise>
</c:choose>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="${BS}/js/weixin/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="${BS}/js/weixin/uploadPhoto.js"></script>
</body>
</html>
2）重点代码uploadPhoto.js，负责调用接口
/**
* @date 2017-12-01
* @author 半山闲人
* 提示插件使用jqery weui，需要可以研究研究，挺不错的一个插件，官方网站：http://jqweui.com/
*/
var signature = $("#signature").val();//后台传回来的调用接口所需参数
var nonceStr = $("#nonceStr").val();//后台传回来的调用接口所需参数
var timestamp = $("#timestamp").val();//后台传回来的调用接口所需参数
var weixinOperId = $("#weixinOperId").val();//后台传回来的调用接口所需参数
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: weixinOperId, // 必填，公众号的唯一标识
timestamp:timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature:signature,// 必填，签名
jsApiList: [
'previewImage',
'chooseImage',
'downloadImage',
'uploadImage',
'getLocalImge',
'getNetworkType'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){//不是wifi提示
wx.getNetworkType({
success: function (res) {
var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
if(networkType!="wifi"){
$.toptip("当前你网络环境为"+networkType+"，上传请注意流量",2000,'warning');
}
}
});
});
wx.error(function(res){
});
var visW = $(window).width();
var NvisW = $(window).width();
$(function(){
$("#uploaderFiles img").on("click",function(){
var th = $(this);
$.confirm("是否确实删除该图片", function() {
//点击确认后的回调函数
var src = $(th).attr("osrc");
var id = $(th).attr("vid");
toDelPic(id,src);
}, function() {
//点击取消后的回调函数
});
});
$(".weui-uploader__input").on("click",function(){
var length = $(this).attr("length");
length = 5-length;
wx.chooseImage({
count: length, // 可选图片张数，默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
localIdArr = localIds;
uploadImg(localIds);
}
});
});
});
function toBackOne(){
// var powerStationNumber = $("#powerStationNumber").val();
// location = "/"+getProjectName()+"/wxFirst/getUserPowerStationDetail?powerStationNumber="+powerStationNumber;
}
var int = 0;
var serverIdArr = new Array();
var localIdArr = new Array();
function uploadImg(localId){//上传成功，微信服务器会返回一个本地ID，可以预览
var len = localId.length;
wx.uploadImage({//根据本地ID获得微信服务器ID
localId: localId[int].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 0, // 默认为1，显示进度提示
success: function (res) {
int++;
var serverId = res.serverId; // 返回图片的服务器端ID
serverIdArr.push(serverId);
if(len>int){
uploadImg(localId);
}else{
downloadImg(serverIdArr);//下载微信服务器下的图片
}
}
});
}
function downloadImg(serverIdArr){//下载微信服务器下的图片到本地
$.showLoading("上传中");
var stationId = $("#stationId").val();
$.ajax({
type:"POST",
url:"/"+getProjectName()+"/wxFirst/downloadImg",
dataType:"json",
data:{
serverIdArr:serverIdArr,
localIdArr:localIdArr,
stationId:stationId
},
success:function(result){
$.hideLoading();
if(result>0){
$.toptip("上传成功",2000,'success');
setTimeout(function() {
window.location.reload();
},2000);
}
}
});
}
window.addEventListener('DOMContentLoaded',init,false);
function toDelPic(id,src){
//删除图片操作
}到此该功能已经完成，但有个最大的不足之处，就是微信没有提供裁剪功能，所以往往上传图片大小不符合需求大小。在此提供的裁剪插件：cropper，有空的可以了解一下。有空也会写一篇不使用微信上传功能，实现图片上传、支持裁剪、压缩。
如有错误与不足之处，欢迎大家评论区提出。
分享到：
相关推荐
2、Wechat.class.php 微信公众平台PHP-SDK 封装了公众号的全部功能，几行代码调用完成复杂功能 3、WechatAuth.class.php 封装了 微信消息及二维码类 可指定openid 发送消息 消息类型包括（text、image、voice、video...
微信JS-SDK Demo 摘录微信调用扫一扫功能的实现
PHP获取微信公众号JSSDK，拿到签名,返回前端，前端调用JSSDk,
用于微信公众号网页开发Nodejs端的微信SDK，满足基础的微信开发调用
ASP版调用微信JS-SDK扫一扫功能,这个代码是调用JSSDK实现调用移动端摄像头扫一扫功能。其他代码可以参照这个DEMO，里面包含了获取access_token，生成签名。
在JAVA后端，我们需要与这个JS-SDK配合，以实现从服务器端调用微信支付接口，为前端提供安全可靠的支付服务。下面将详细阐述相关知识点。 1. **微信支付API** 微信支付提供了丰富的API接口，包括统一下单、订单...
大家可以先看看我的微信内嵌网页开发教程 实在不行再下载这几个文件吧 这是我在工作中开发完成已经上线的微信项目生成签名 调用jssdk这块 其中这几个文件是生成签名的重要组成部分 可以稍微理解下然后就可以直接拿来...
如何在H5页面调用微信的扫一扫功能来识别二维码。简单实用，新手开发必备，开发微信网页应用，调用JS-SDK扫一扫二维码
微信支付SDK（wxpay-sdk-0.0.3）是微信官方提供的一个集成在开发者应用程序中的支付工具包，主要用于帮助开发者实现与微信支付接口的无缝对接。这个版本为0.0.3，代表着它是经过一系列迭代和优化后的一个较新版本，...
php 封装好微信公众号的微信红包功能，实现微信公众号发红包功能的简单调用
最近又在vue中捣鼓了下微信公众号api的接入，不得不说这里边水是真的深啊，上次分享了微信授权登录和js-sdk签名的部分，其中很多朋友私信我表示了疑惑，今天我就再次尝试理顺一下这里边的坑吧： 微信JS-SDK是微信...
公司最近有微信公众号的需求，那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号，在网上看了很多篇博客，最终选定了两种方法，并且亲测有效。 一、通过全局，在...
startRecord 开始录音，再调用 stopRecord 停止录音，会返回一个音频的本地Id，把录音追加的Html录音列表中，方便播放录音，使用 playVoice 播放录音列表中的录音，再使用 uploadVoice 把录音上传到微信服务器上，会...
它允许开发者调用微信的一系列功能，如分享、支付、地理位置、扫一扫、微信登录等，提升用户在微信内浏览网页的互动性和便捷性。 在微信JS-SDK中，主要涉及以下几个核心知识点： 1. **初始化配置**：在使用JS-SDK...
1. **JSAPI接口**：JavaScript API接口允许网页通过调用微信支付提供的JS函数，完成支付请求。用户在微信内置浏览器中打开网页时，可以通过点击支付按钮，调用JSAPI接口发起支付流程。 2. **商户平台配置**：在使用...
解决不显示摘要和图片的问题，需要调用微信公众号的js-sdk的api ,需要前端和后台的配合， 后台需要返回 appid (公众号的appid ) 、 timestamp (生成签名的时间戳) 、nonceStr (签名的随机字符串) 、 signature (签名...
最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用...
此代码是前端在vue中利用sdk调用微信公众号api的拍照功能代码
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState...