• 调微信接口上传图片


    步骤一:引入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);
    						})
    					}
    				});
    			};
    		}
    	});
    }
    

      

  • 相关阅读:
    ES6中的基础语法
    let和const、var
    iframe框架
    ajax
    面试题
    移动端的点击延迟事件
    移动端如何设置字体
    swiper插件以及简介
    第十二章 systemctl管理脚本
    第十一章 awk命令
  • 原文地址:https://www.cnblogs.com/nicoleyani/p/7390909.html
Copyright © 2020-2023  润新知