js-jssdk微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）

Posted 2022-05-25 liuqingxia

值得注意的是：

1.在微信H5中选择图片运用：wx.chooseImage，成功后返回：  res.localIds用于上传图片使用

   上传图片：wx.uploadImage。

2.上传图片的时候务必是一张一张的上传的（建议采用递归）

3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传。

 

案例：深圳艺星“#美力女生#星粉颜值夏令营，2019Yestar艺星整形”

html

<div class="photos">
     <p>同时选择上传1-9张照片，第一张为封面图</p>
     <div class="photosInput">
          <div id="dd"></div>   //这里面是存储放置上传的图片的
          <div onclick="ChoosePhoto()" id="chooseimgDiv" >选择图片</div>
     </div>
</div>

 

 

js:

var imgA=new Array();
var imgserverId;  //存储的图片拼接字符；
function ChoosePhoto()
    wx.chooseImage(
	count: 9, // 默认9
	sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
	sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
	success: function (res) 
		document.getElementById("dd").innerHTML="";
                imgA=[];
		imgserverId="";
		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                var htmlPhoto="";
                for(var i=0;i<localIds.length;i++)
			htmlPhoto +=‘<div class="imgdiv"><img src=‘+ localIds[i]+‘ /></div>‘;
                
		syncUpload(localIds) 
		document.getElementById("dd").innerHTML+=htmlPhoto;
	
    );
;

   var syncUpload = function(localIds)
         var localId = localIds.pop();
	 wx.uploadImage(
		 localId: localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
		 isShowProgressTips: 1, // 默认为1，显示进度提示
		 success: function (res) 
		      //res.serverId 返回图片的服务器端ID
			var serverId = res.serverId; // 返回图片的服务器端ID
			imgA.push(serverId)
			imgserverId=imgA;
			if(localIds.length > 0)
               			 window.setTimeout(function()
               				 syncUpload(localIds);
    				 ,100);
           		 else
           			 window.setTimeout(function()
               				  downloadImage(0);
    				,100);
           					
            		
		 
	 )

　　

　

 

题外话：

在ios中之前做项目时也有遇到一个需求是“分享朋友圈后抽奖次数+1”。的情况。

安卓能够好好的判断接收到用户分享成功。但是ios则不会成功。

我们的解决办法也是需要延迟几百毫秒才能正常成功的接收到苹果的分享反馈