在微信公众号网页开发时，遇到了图片上传的问题，查看了微信的开发者文档，里面的资料比较全。接着我们看一下整个的流程
1、config权限配置
$.ajax({
url:'wx_getConfig',
type:'get',
dataType:'json',async:false,
success:function(data){var appId = data[0].appId;var timestamp = data[0].timestamp;var nonceStr = data[0].nonceStr;var signature = data[0].signature;
({
debug:false,//调试模式 当为tru时，开启调试模式
appId: appId,
timestamp: (),//签名时间戳
nonceStr: nonceStr, //生成签名的随机串
signature: signature,//签名
jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'],
success:function(){
alert("配置成功")
},
fail:function(){
alert("配置失败")
}
});
},
error:function(){
alert("error");
}
})
这一步，在调试的时候，会报config:invalid signature，如果出现这个错误，建议按一下顺序去检查
1.确认签名算法正确，可用 /debug/cgi-bin/sandbox?t=jsapisign页面工具进行校验。
2.确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
3.确认url是页面完整的url(请在当前页面alert(('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5.确保一定缓存access_token和jsapi_ticket。
2、config配置成功
当config配置成功后，就会执行ready函数，所有的操作必须等到config配置完成后才会执行，如果是页面加载就执行的操作，就必须放在ready中执行。如果是在被触发时执行的操作，则不需要放在ready中
(function () {//在这里调用 API
({
jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'],
success: function (res) {
console.log((res));
}
});
});
3、调取摄像头和相册
function takePicture(nums) {
({
count:1,
needResult:1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //可以指定来源是相册还是相机，默认二者都有
success: function (data) {
localIds= [0]; //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
var num1 =nums;
wxuploadImage(localIds,num1);
wxgetLocalImgData(localIds,num1);
},
fail: function (res) {
alterShowMessage("操作提示", (res), "1", "确定", "", "", "");
}
});
}
4、上传到微信服务器
function wxuploadImage(e,num) {var $hiddenImg= $(".hiddenImg");
({
localId: e,//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, //默认为1，显示进度提示
success: function (res) {
mediaId=;
wxdownloadImage(mediaId)
$($hiddenImg[num]).val(mediaId);
},
fail: function (error) {
picPath= '';
localIds= '';
alert((error));
}
});
}
此时的图片上传，是将图片上传到微信服务器，我们可以根据获取到的medisId 将图片下载到本地服务器。
5、获取本地图片接口，在本地显示
function wxgetLocalImgData(e,num){var $myimg = $(".myimg");if(window.__wxjs_is_wkwebview){
({
localId: e,//图片的localID
success: function (res) {var localData = ; //localData是图片的base64数据，可以用img标签显示
localData = ('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
$($myimg[num]).attr("src", localData);
},fail:function(res){
alert("显示失败");
}
});
}else{
$($myimg[num]).attr("src", e);
}
}
此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
6、提交到本地服务器，实现本地上传
function tijiao(){var userInfo = (("UserInfoKey"));var user = (("user"));var userId =;var company =;var kfCompanyProvince =;var kfCompanyCity =;var kfCompanyDistrict =;var companyAddress =;var userType =;var userName =;var principalPhoneCode =;var img1 = $($(".hiddenImg")[0]).val();var img3 = $($(".hiddenImg")[1]).val();var img5 = $($(".hiddenImg")[2]).val();var img6 = $($(".hiddenImg")[3]).val();var img7 = $($(".hiddenImg")[4]).val();
$.ajax({
url:'user_uploadInformation',
data:{"userId":userId,"company":company,"kfCompanyProvince":kfCompanyProvince,"kfCompanyCity":kfCompanyCity,"kfCompanyDistrict":kfCompanyDistrict,"companyAddress":companyAddress,"userType":userType,"userName":userName,"principalPhoneCode":principalPhoneCode,"img1":img1,"img3":img3,"img5":img5,"img6":img6,"img7":img7
},
type:'post',
dataType:'json',async:false,
success:function(data){if( == 0){
("认证失败，请重新认证")
}else if( == 1){
("申请提交成功，请稍后",function(){
="../../index/"})
}
},
error:function(data){
alert("上传失败")
}
})
}
7、总结
根据以上的步骤，简单的调取摄像头和相册实现图片上传的功能就实现了，其实微信平台的开发者文档给我们提供了非常详细的开发者文档，以后可以一起多研究研究。最后附上微信开发者文档链接/wiki?t=resource/res_main&id=mp1445241432