WeChat JSSDK multi image upload and solve the loading problem of IOS system upload

WeChat multiple picture upload must be uploaded one by one, that is, cannot be parallel, must be serial:

Then we can define an upload function as follows:

var serverIds = [];

function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader(' Data being submitted ...');
$('form').submit();
}
wx.uploadImage({
localId: localImagesIds[0], //  Need to upload the image locally ID By the chooseImage The interface for 
isShowProgressTips: 1, //  The default is 1 , showing progress prompt 
success: function (res) {
serverIds.push(res.serverId); //  Returns the server side of the image ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert(' Upload failed, please re-upload! ');
}
});
}

The upload function is defined, so when you click the picture box, you need to select the picture. The definition is as follows:

// Choose picture 
$('#uploadImages img').on('click', function () {
var $img = $(this);
wx.chooseImage({
count: 1, //  The default 9
sizeType: ['original', 'compressed'], //  You can specify whether it is an original or a compressed diagram, by default 2 Who has 
sourceType: ['album', 'camera'], //  You can specify whether the source is an album or a camera by default 2 Who has 
success: function (res) {
var localIds = res.localIds; //  Returns the local location of the selected photo ID List, localId Can be used as a img Of the label src Property display image 
//$.alert(localIds[0]);
$img.attr('src', localIds[0]).addClass('uploaded');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});

Once the user has selected all the images, it is time to upload the images. Here we need to use the function we just defined, the specific code is as follows:

// Submit event 
$('#btnSubmit').on('click', function () {
var $chooseImages = $('#uploadImages img.uploaded');
if ($chooseImages.length === 0) {
$.alert(' Please upload photos! ');
return;
}
$.showPreloader(' Uploading photos ...');
var localImagesIds = [];
$chooseImages.each(function () {
localImagesIds.push($(this).attr('src'));
});
uploadImages(localImagesIds);
});

As shown in the code above, the function uploadImages is called and localImagesIds is passed. In the uploadImages function, recursion is used, but once one image is uploaded, it will call itself again and continue to upload the next image. Please note the following key code:

wx.uploadImage({
localId: localId, //  Need to upload the image locally ID By the chooseImage The interface for 
isShowProgressTips: 1, //  The default is 1 , showing progress prompt 
success: function (res) {
serverIds.push(res.serverId); //  Returns the server side of the image ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert(' Upload failed, please re-upload! ');
}
});

This way, the 1 cut looks like OK, and there is nothing wrong with the Android system. However, IOS cannot be uploaded normally, and 1 will display the loading status. Code double check, no problem, then it must be a WeChat pit...

After 998101 difficulties, I finally found a solution:

var localId = localImagesIds[0];
// To solve IOS Unable to upload the pit 
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}

The full uploadImages code is shown below:

function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader(' Data being submitted ...');
$('form').submit();
}
var localId = localImagesIds[0];
// To solve IOS Unable to upload the pit 
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
wx.uploadImage({
localId: localId, //  Need to upload the image locally ID By the chooseImage The interface for 
isShowProgressTips: 1, //  The default is 1 , showing progress prompt 
success: function (res) {
serverIds.push(res.serverId); //  Returns the server side of the image ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert(' Upload failed, please re-upload! ');
}
});
}

The above is for WeChat JSSDK multi-picture upload and to solve the IOS system upload 1 direct loading problem related to the introduction, I hope to help you!