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

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