微信js-sdk 图片接口

@博乐

最近做的项目，需要利用微信端进行拍照，然后将图片上传到本地应用的服务器上。

经过调研发现，微信自带提供的 js-sdk 图片接口符合需求，所以按照如下方法步骤进行实践。

(1) 必读必学的东西

微信JS-SDK Demo、微信JS-SDK说明文档
，大家可以先看下官方提供的文档和demo。

(2) 总结下使用”图片接口“的步骤；
首先要有一个微信公众号，必须是认证后的，不然到配置完成后 就是提示你没有权限 那就恶心了。

第一 ：阅读 微信JS-SDK说明文档 的 1.1 JSSDK使用步骤 ，将你自己的微信公众号
按照五部进行处理。
记住 微信的appid 和 appsercert。

第二：编写jsp

首先要引入 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script language="javascript">

wx.config({

debug: true, // 刚开始配置的时候 用true 会给予错误提示， 配置无误后 在修改为 false 就没有提示了

appId: '${appid}', // 必填，公众号的唯一标识

timestamp: '${timestamp}', // 必填，生成签名的时间戳

nonceStr: '${nonceStr}', // 必填，生成签名的随机串

signature: '${signature}',// 必填，签名，见附录1

jsApiList: [

'checkJsApi',

'chooseImage',

'uploadImage',

'downloadImage'

]

});

</script>

注意：此处 appId 、timestamp、nonceStr、signature 均是动态生成，
这样的话后期调用的时候就不会报错：地址已过期。
动态生成的方法我会传到下载资料里。

// 准备阶段 该段可以配置你的配置是否正常
wx.ready(function () {

// 1 判断当前版本是否支持指定 JS 接口，支持批量判断

document.querySelector('#checkJsApi').onclick = function () {

wx.checkJsApi({

jsApiList: [

'checkJsApi',

'chooseImage',

'uploadImage',

'downloadImage'

],

success: function (res) {

alert(JSON.stringify(res));

}

});

};

// 关键的代码 调用微信的接口 可以使用手机上的 摄像头 进行拍照或者选图
// 5 图片接口

// 5.1 拍照、本地选图

var images = {

localId: [],

serverId: []

};

var uploadserverId=null;

var accessToken = '${accessToken}' ;

var num=0; //定义一个全局变量

document.querySelector('#chooseImage').onclick = function () {

wx.chooseImage({ // sizeType: ['original', 'compressed'],

sizeType: ['compressed'], // 拍的照片很大可以自动压缩 便于传输

success: function (res) {

if (res.localIds.length==1){

//var textid="paizhao"+num;

var text="<input type='text' id = "+ num + " value=''/></br>";

$("#div").append(text);

$("#"+num ).val(res.localIds[0]);

images.localId[num] = res.localIds[0];

num=num+1;

}else{

//var textid="xuantu"+num;

for (var i=0;i<res.localIds.length;i++)

{

var text="<input type='text' id = "+ (num+i)+ " value=''/></br>";

$("#div").append(text);

$("#"+(num+i) ).val(res.localIds[i]); // 添加到路径下

images.localId[num+i] = res.localIds[i];

}

num=num+res.localIds.length;

}

}

});

};

// 5.3 上传图片 调用该接口 将图片上传到本地服务器上 使用的ajax 异步传送 该方法我会传到下载资料里。

var imagename = new Array();

document.querySelector('#uploadImage').onclick = function () {

alert("begin");

if (images.localId.length == 0) {

alert('请先使用 chooseImage 接口选择图片');

return;

}

var i = 0, length = images.localId.length;

images.serverId = [];

function upload() {

wx.uploadImage({

localId: images.localId[i],

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

success: function (res) {

i++;

//alert('已上传：' + i + '/' + length);

imagename.push(res.serverId);

$("#iMAGENAME").val(imagename);

alert(imagename);

$.ajax({

async: false, //false 修改为异步

type: "POST",

url: "${pageContext.request.contextPath}/itilgongdan/wechatgongdan/upload.do",

data:{"serverId": res.serverId , "accessToken": accessToken},

success: function(data){

alert("上传成功!");

},

error:function(data){

alert("上传失败!");

}

});

if (i < length) {

upload();

}

},

fail: function (res) {

alert(JSON.stringify(res));

}

});

}

upload();

alert("end");

};

常见问题提醒：
(1) invalid signature 访问的地址不能url 需要在 公众号的 可信域名 里添加。
(2) system:permission denied 没有权限的公众号，认证后的肯定没问题，又或者是秘钥不对。