最近做项目，其中有个需求是在微信企业号上实现图片上传操作。一开始我就把重点放在了"移动端图片上传"而不是"微信图片上传"，所以各种查资料，找插件，费了好些功夫，实现起来也是各种困难。后来接触到微信公众号，稍微了解了一下，才知道利用微信公众号或者现在已经升级为企业微信的企业号的API，还是挺简单的一个功能。下面我就详细整理一下整个过程，做个笔记，一方面可以帮助到从未接触过这个功能的同学，一方面也方便自己日后翻阅。

1、首先进入微信公众平台，查看JS-SDK开发文档。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

2、开发文档有详细的步骤说明，但我还是根据我自己做的过程再稍微记录一下。

第一步中的绑定安全域名可不做，不会影响功能的实现。我直接从第二部引进js文件开始的。当我们想要通过微信上传图片时，有两种方法：一种是JS文件调用，一种是接口调用。这里用的是第一种，通过引进JS文件，然后直接调用接口，不再使用URL等接口地址。

3、JS文件的引入：

图1-引进JS文件

4、通过config接口注入权限验证配置：

这一步尤为重要。

图2-配置信息

1)在开发调试时，可将debug设为true,这样可以看到返回的信息，方便调试bug。但在生产环境上，记得设为false。

2)appId是公众号的唯一标识。项目挂靠在哪个公众号或者企业号，就去找相关负责人拿到appId，这个是固定的值，没有改动，也不需要调用获取。(服务器端，也就是后端开发人员去拿到这个值)

3)除了jsApiList的值需要前端人员根据需要自己写以外，其他参数均需从后端获取。最重要的是其中的签名串，有其特定的生成规则，后端需要根据一定的规则，去调用微信的接口，获取相关参数后生成签名串，然后再将对应的参数传给前端。前端人员获取到这些数据信息后，就可以完成配置信息的注入了。

图3-调用配置接口

4)可能会遇到的问题，当在完成配置信息的注入后，实际开始调用所需接口时，出现报错信息：invalid signature，permission denied，此时解决方法如下：

①首选检查生成签名串的算法(规则)是否正确；

② 其次需要特备注意的是：你在利用参数生成签名的时候，要对所有待签名参数按照字段名的 ASCII 码从小到大排序(字典序)后，使用 URL 键值对的格式(即key1=value1&key2=value2…)拼接成字符串 string1。这里需要注意的是所有参数名均为小写字符。

③注意参数key值大小写问题；

④生成签名串时，需要前端人员给后端传当前页面的URL，但不包括'#'hash后面的部分。注意前端传值时的格式以及后端接收时的解析方式。

⑤确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

⑥很重要的一点，确认当前访问页面的URL已经被项目挂靠的公众号或者企业号授权访问。

更多错误信息及详细解决方法，请参考：https://my.oschina.net/u/2308739/blog/371414

5)jsApiList中需要填写的接口。(其实按现在这个操作，是不需要下载图片接口的，因为下载这一操作是由后端实现的。)

图4-jsApiList中的接口

5、配置信息注入并且成功校验完之后，就可以在wx.ready接口下操作相关图片接口了。

图5-wx.ready接口

6、在wx.ready下调用图片选择、上传、预览等接口时，直接按照操作的顺序调用即可。但其中涉及到的一个问题是，如果前端没有自己的后台，需要和另外一台服务器上的后台进行交互，此时在图片上传时就需要调用后端接口，将图片上传后生成的文件流，最终得到的mediaId传给后端，然后让后端去微信服务器上下载刚刚上传的图片。

7、话不多说，直接上全部代码。

/** ******************获取微信配置数据********************** */

var Url = ""; //服务器接口路径

var oldNet = '';

var newNet = '';//记录网络状态

var configData;

$.ajax({

url: Url + '/GetSignatureInfo',//后端接口名，可自定义。

// data: {pageUrl: location.href.split('#')[0]},

type:"get",

//params意为参数，是自定义的，用以表明这是传给后台的数据。

data:{"params":location.href.split('#')[0]},

contentType:"application/json; charset=utf-8",

//数据类型为jsonp，解决跨域问题。

dataType:"jsonp",

//自定义的jsonp回调函数名,默认为jQuery自动生成的随机函数

jsonpCallback:"success_jsonpCallback_select",

//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为callback)

jsonp:"callbackparam",

success: function (data) {

// alert(JSON.stringify(data));

configData = {

debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: data.appid, // 必填，公众号的唯一标识

timestamp: data.timestamp, // 必填，生成签名的时间戳

nonceStr: data.nonceStr, // 必填，生成签名的随机串

signature: data.signature,// 必填，签名，见附录1

jsApiList : ['chooseImage','previewImage','uploadImage','downloadImage']

// 必填，需要使用的JS接口列表，所有JS接口列表见附录2

};

//step2:注入配置信息

wx.config(configData);

//step3:通过ready接口处理成功验证

wx.ready(function () {

// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

// alert("执行ready方法");

// wx.checkJsApi({

// jsApiList: ['chooseImage'] // 需要检测的JS接口列表，所有JS接口列表见附录2,

// success: function(res) {

// // 以键值对的形式返回，可用的api值true，不可用为false

// // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

// }

// });

//接口1:获取网络类型

wx.getNetworkType({

success: function (res) {

oldNet = res.networkType; // 返回网络类型2g，3g，4g，wifi

// alert("网络类型"+ oldNet);

}

});

// 拍照

// alert(document.querySelector('.head_portrait'));

document.querySelector('.head_portrait').onclick = function (){

$("#tips").html("点击上传图片");

var img1 = $('#chooseImage1');

//接口2:拍照或从手机相册中选图接口

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'],//可以指定来源是相册还是相机，默认二者都有

success: function (res) {

var imgLocalId = res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

// alert("imgLocalId=" + imgLocalId);

// alert(res.contentType);

if(!imgLocalId){

alert(2);

fnPicInfo('',imgLocalId,'choose','fb',JSON.stringify(res));

}

img1.attr('src',imgLocalId);

//选择图片之后询问是否确认上传

$("#isupload").css("display","block");

//不上传或者重新选择

$("#isupload_n").click(function(){

$("#isupload").css("display","none");

$("#tips").html("重新选择");

$("#chooseImage1").src("");

});

//确认上传

$("#isupload_y").click(function(){

$("#isupload").css("display","none");

//接口3:上传图片接口

wx.uploadImage({

localId: imgLocalId[0], // 需要上传的图片的本地ID，由chooseImage接口获得

isShowProgressTips: 1, // 默认为1，显示进度提示

success: function (res) {

if(res.serverId.indexOf("wxLocalResource://")>=0){

mui.alert('',"图片上传失败，请重新上传！",'');

return;

}

mediaId = res.serverId;

if(!mediaId){

fnPicInfo(mediaId,imgLocalId,'upload','fb',JSON.stringify(res));

}

img1.attr('src',imgLocalId);

mediaId1 = mediaId;

localId1 = imgLocalId;

//这里再写一个接口,将mediaId以及其他所需参数传到后台。回调函数中不需要写什么信息。

//准备请求的参数：班级编码、mediaId、上传类型

//注：班级编码和上传类型是根据项目所需上传的参数，大家可根据自己的项目定义，但是mediaId肯定是要上传的。

var requestdata = {

"classcode": classcode,

"mediaId": mediaId,

"uploadtype": uploadtype

}

alert(JSON.stringify(requestdata));

//调用图片上传接口

post_mediaId(requestdata);

},

fail: function(re){

wx.getNetworkType({

success: function (res) {

$('.hidden_word1').show();

newNet = res.networkType; // 返回网络类型2g，3g，4g，wifi

fnPicInfo('','','upload','fb',re);

}

});

}

});

});

},

fail: function(re){

alert(JSON.stringify(re));

wx.getNetworkType({

success: function (res) {

$('.hidden_word1').show();

newNet = res.networkType; // 返回网络类型2g，3g，4g，wifi

fnPicInfo('','','choose','fb',re);

}

});

}

});

};

})

}

});

// 向后台数据库传递照片的相关信息，根据实际需求看是否需要传递这些信息。

// function fnPicInfo(sId,lId,opType,businessType,remark) {

// remark+="||"+oldNet+"||"+newNet;

// $.ajax({

// url:Url+'maintainCommon/addWXMediaRecord',

// data:{

// serviceId:sId,

// localId:lId,

// clientType:navigator.userAgent,

// opType:opType,

// businessType:businessType,

// remark:remark

// }

// });

// }

/********************获取微信配置数据结束********************** */

//向后端传递mediaId的值，以便其能到微信服务器上下载图片到本地服务器。

var post_mediaId = function(requestData){

var server_IP = "服务器接口地址";

$.ajax({

url: server_IP,

type:"get",

//params意为参数，是自定义的，用以表明这是传给后台的数据。

data:{"params":JSON.stringify(requestData)},

contentType:"application/json; charset=utf-8",

//数据类型为jsonp，解决跨域问题。

dataType:"jsonp",

//自定义的jsonp回调函数名,默认为jQuery自动生成的随机函数

jsonpCallback:"success_jsonpCallback_select",

//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为callback)

jsonp:"callbackparam",

//访问成功时的回调函数

success: function(respose){

alert(respose.message);

},

error: function(data){

alert("服务器连接失败");

}

});

}