WeChat JS SDK wx.chooseImage() not works

former_member637548 · ‎10-22-2019

Dear WeChat developers,

I have an official WeChat account, and I created a small chat application. I try to send images with WeChat JSSDK, but it is not working. I followed this tutorial: https://developers.weixin.qq.com/doc/offiaccount/en/OA_Web_Apps/JS_SDK.html#1

My code is here:

<html>
	<head>
		<!--<script type="text/javascript" src="js/jweixin-1.4.0.js"></script>-->
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="js/sha1.js"></script>
	</head>
<body>
	<div>Hello world!</div>
	<button class="btn btn_primary" onclick="initSdk()">Init sdk</button>
	<button class="btn btn_primary" id="chooseImage">Choose image</button>
<script type="text/javascript">	
        function initSdk() {  //Only click to 'Init sdk' after document ready
          var d = new Date();
          var timestamp = Math.floor(d.getTime() / 1000);
          var nonce = Math.random().toString(36).substr(2, 15);
          var string = "param1=param1¶m2=param2&noncestr=" + nonce + "×tamp=" + timestamp;
          var signature = sha1(string); //sha1 function is added to separate js file


          wx.config({
            debug: true,
            appId: '...', //my appid
            appSecret: '..', //my appsecret
            timestamp: timestamp, 
            nonceStr: nonce, 
            signature: signature,
            wechatToken: '...',//Getted from WeChat API by my backend, no older than 2 hours
            jsApiList: [
                'chooseImage',
                'uploadImage'
            ]
          });


          wx.error(function (res) {
              console.log('error');
          });


          wx.ready(function () {
              console.log('ready');
          });
    };
	document.querySelector('#chooseImage').onclick = function (res) {
		debugger;
		wx.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'],
			success: function (res) {
				debugger;
				console.log('success');
				var localId = res.localIds;
				console.log(localId);
				//Todo: call wx.uploadImage(...) with image localId
			},
			fail: function (res) {
				debugger;
				console.log('fail');
			},
			complete: function (res) {
				debugger;
				console.log('complete');
			},
			cancel: function (res) {
				debugger;
				console.log('cancel');
			},
			trigger: function (res) {
				debugger;
				console.log('trigger');
			}
		});
	};
</script>
</body><br>

When I click to 'Init sdk' button, I get this two lines in browser's console:

<code>"config",{debug:true, appId:"...", appSecret:"..", timestamp:1571442446, nonceStr:"oet50lzzo1f",…}
ready

Run code snippet

Expand snippet

so everything looks good, the JSSDK initialized, and the 'ready' line appears from wx.ready() function. Now I click the 'Choose image' button, and the next line appears:

<code>"chooseImage",{count:1, sizeType:Array(2), sourceType:Array(2), success:ƒ, fail:ƒ,…}

But there is no 'success' line and no localId value(which is needed to upload image) appears in console. It seems like the wx.chooseImage() runs, but not works. And there is no 'fail', no 'complete' lines appear, so I think no case runs inside chooseImage(). What can be the problem? When I give wrong config datas(appsecret, token etc), I got the 'ready' line also in console. I tried the newer JSSDK(jweixin-1.4.0.js) also, but the problem is the same.

Thank you for help!