调微信接口上传图片

Posted 2020-10-03 nicole亚妮

步骤一：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

步骤二：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

var sCurrURL = location.href.split(‘#‘)[0];
var myurl = getRootPath() + "zs/wechat/getJsSdkconfig?url="+sCurrURL;   
$.axpost(myurl, null, function(data){
		var timestamp = data.respMap.timestamp;
	var noncestr = data.respMap.noncestr;
	var appId = data.respMap.appId;
	var signature = data.respMap.signature;
	wx.config({
	    //debug: true, 
	    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: appId, // 必填，企业号的唯一标识，此处填写企业号corpid
	    timestamp:timestamp , // 必填，生成签名的时间戳
	    nonceStr: noncestr, // 必填，生成签名的随机串
	    signature: signature,// 必填，签名，见附录1
	    jsApiList: [‘chooseImage‘,‘uploadImage‘] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});			
})

　　

步骤三：选取与上传图片

$(‘#cardFront‘).click(function() {
	upImg($(‘#front‘));
});
$(‘#cardBack‘).click(function() {
	upImg($(‘#back‘));
})
function upImg(obj){
	wx.chooseImage({
		count: 1,
		// 默认9
		sizeType: [‘original‘, ‘compressed‘],
		// 可以指定是原图还是压缩图，默认二者都有
		sourceType: [‘album‘, ‘camera‘],
		// 可以指定来源是相册还是相机，默认二者都有
		success: function(res) {
			var localIds = res["localIds"]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
			if (1 === localIds.length) {
				var localId = localIds[0];
				wx.uploadImage({
					localId: localId,
					// 需要上传的图片的本地ID，由chooseImage接口获得
					isShowProgressTips: 1,
					// 默认为1，显示进度提示
					success: function(res) {
						var serverId = res.serverId; // 返回图片的服务器端ID
						var url = getRootPath() + "/zs/wechat/uploadImg?mediaId=" + serverId + getUrlEnd();
						$.axpost(url, null,
						function(data) {
							var picturePath = data.respData.picturePath;
							obj.attr(‘src‘, picturePath);
						})
					}
				});
			};
		}
	});
}