js-jssdk微信H5選擇多張圖片預覽並上傳（兼容ios，安卓，已測試）

值得注意的是：

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則不會成功。

我們的解決辦法也是需要延遲幾百毫秒才能正常成功的接收到蘋果的分享反饋