微信小程序脱坑——多图片/文件上传，返回上传URL数组

在学习微信小程序初期，多文件上传之后需要把上传的多文件URL和其余附属数据一起保存到数据库。不多说，直接上代码。初学者欢迎指出问题。

 上传多文件页面js

var that = this;

let name = '***';

let count = '0';

let fileName = '***';

let filePath = ‘*******************’;

app.uploadFiles(bannerImg, name, count, fileName, filePath, ''); //调用多文件上传方法上传到服务器banner图

var i = 0;

let isBanner = setInterval(function(e) { //利用定时器来获取上传的bannerURL

i++;

if (null != app.data.fileURLS) { //说明上传banner图完成并获取到文件URL数组

clearInterval(isBanner);//销毁定时器

var BannerURLs = app.data.fileURLS;

wx.request({})//上传多文件URL与附属信息到数据库

} else {

console.log('获取banner刷新了' + i + '秒');

}

}, 1000)

app.js 

 

利用递归方式实现多文件上传

/**

* 多文件上传

* fileList：上传文件集合

* name：后台接收文件名字

* count：从0开始，递归参数

* fileName：保存到服务器中的文件名字

* filePath：保存到服务器中的位置

* fileURLs：拼接服务器返回的上传文件URL（默认为''）

*/

uploadFiles(fileList, name, count, fileName, filePath, fileURLs) {

var that = this;

wx.uploadFile({

url: that.url + "base/uploadFiles.do",

filePath: fileList[count],

name: name,

formData: {

fileName: fileName + count,

filePath: filePath

}, //这里是上传图片时一起上传的数据

success: function (e) {

let fileURL = JSON.parse(e.data).fileURL;

if ('' != fileURLs) {//拼接链接

fileURLs = fileURL + "," + fileURLs

} else {

fileURLs = fileURL

}

},

fail: function (e) { },

complete: function (e) {

count++; //下一张

if (count == fileList.length) {

//上传完毕，作一下提示

var strs = new Array();

strs = fileURLs.split(",");

that.data.fileURLS = strs

console.log(fileName+'上传完毕')

} else {

//递归调用，上传下一张

that.uploadFiles(fileList, name, String(count), fileName, filePath, fileURLs);

}

}

})

}