微信开发上传多张图片html,微信JSSDK一次性上传多张图片卡死解决方案

应用场景描述

微信禁止了使用表单INPUT[TYPE="FILE"]上传图片，必须使用微信WEB JSSDK 图片上传，该插件是一张一张的上传的。过程是这样的 上传图片 ——> 返回图片本地ID ——>根据图片本地ID,获取图片媒体ID——>服务端根据图片媒体ID下载图片。

上传卡死的原因

多张连续上传的时候,因为还未等一张图片获取完媒体ID，而下一张图片又开始请求获取媒体ID，所以会出现卡死问题。解决方案如下：

递归处理 (推荐)

定时器处理

递归处理逻辑思路

定义两个变量 var idx =0; var localIds; 分别存储上传序号,记录上传到第几张图片，本地图片ID数组，即调用微信 WEB JSSDK 的wx.chooseImage()返回的结果 写递归函数实现获取根据图片本地ID,获取图片媒体ID这个环节。

递归处理逻辑代码

// ID数组

var localIds = null;

// 上传序号

var idx = 0;

var serverIds='';

wx.ready(function(){ //配置web jssdk通过执行

//调用图片上传接口

wx.chooseImage({//返回本地图片id 也可做为img 路径显示图片

success: function (res) {//上传本地图片成功

localIds = res.localIds;//本地图片id数组，下标从0开始

//调用上传递归函数

wxUploadImg(localIds);

}

});

/**

* [wxUploadImg 获取图片媒体ID 递归函数]

* @author 邱先生

* @copyright

* @version [V1.0版本]

* @date 2016-07-02

* @param {[type]} localIds [本地图片ID数组]

* @return {[type]} [description]

*/

function wxUploadImg(localIds){

wx.uploadImage({//获取图片媒体ID

localId: localIds[idx].toString(), // 需要上传的图片的本地ID

isShowProgressTips: 1, // 默认为1，显示进度提示

success: function (res) {//获取成功

// 上传序号，上传一张 累计 +1

idx++

//存储图片媒体ID，用，号分割

serverIds+=res.serverId+',';

if(idx

//调用上传递归函数

wxUploadImg(localIds);

}else{

//上传序号归零

idx=0;

//服务器csrf 验证字符串，如果后端框架没开启csrf，则不需要

var csrf=$('meta[name="csrf-token"]').attr('content');

$.ajax({

url: "服务器端根据图片媒体ID下载图片处理操作地址",

type: 'POST',

dataType: 'json',

data: {_csrf:csrf,serverIds:serverIds},

})

.done(function(data) {

console.log("上传成功");

})

.fail(function() {

console.log("error");

})

.always(function() {

console.log("complete");

});

serverIds='';

return true;

}

},

fail: function(res){//获取多媒体id失败 返回错误代码

alert("上传失败，msg："+JSON.stringify(res));

}

});

}

}