想想从学校出来到公司实习一眨眼都工作三个月了，这三个月在公司的感觉就是学的很杂，前端设计，后端设计，还有小程序之类的，但是没办法啊，领导想要什么，我们就得实现什么（心里疯狂骂产品，疯狂的该需求）。今天写着篇博客就是为了积攒点代码量，以后从公司离职后，写过的代码也好有个印象。
好啦，进入正题吧，前几天实现了一个小程序的多文件上传。多文件上传，简单来说 他就是将图片一张一张的存到集合里面，然后将这个集合传入后台再进行上传。好啦 废话不多说 进入正题吧
我们通过upVideo2这个方法可以加载相应的js
-
<view class="section-tent" style="margin-bottom:0rpx;">
-
<view class="section">
-
<view class="se-left">
-
<span style="margin-left:10px"></span> 附件：
-
</view>
-
<button bindtap="upVideo2" style='font-size:30rpx;margin-right:10rpx;'>选择图片
-
</button>
-
</view>
-
-
<view class="file" wx:for="{{imgUrlList}}" wx:key="FILEID" wx:for-item="value" wx:for-index="index" data-index="{{index}}" >
-
<input type='hidden' hidden="true" name="FILENAME" value="{{}}"></input>
-
<input type='hidden' hidden="true" name="FILEID" value="{{}}"></input>
-
<input type='hidden' hidden="true" name="FILEURL" value="{{}}"></input>
-
<image src="{{}}" class='phone1'></image>
-
</view>
-
</view>
既然是多文件上传，那么在这里我们可以使用递归来进行调用
-
uploadDIY(filePaths, i, length, imgUrlList) {
-
var that = this
-
wx.uploadFile({
-
url: app.data.baseImageUrl + 'file-storage/uploadMultiple',//文件上传路径
-
-
filePath: filePaths[i],
-
name: 'fileInput',
-
header: {
-
'content-type': 'multipart/form-data'
-
},
-
formData: { 'userid': app.data.userId },
-
success: function (res) {
-
//("===" + )
-
var data = JSON.parse(res.data);
-
//保存 附件 数据库 信息 并返回 图片 具体地址路径
-
wx.request({
-
url: app.data.baseUrl + 'xqhz/activity/wxtext/',
-
data: {
-
files: JSON.stringify(data),
-
},
-
method: 'GET',
-
header: {
-
'content-type': 'application/json'
-
},
-
success: function (res) {
-
if (res.data.data == "") {
-
} else {
-
var data = ''
-
data = res.data.data[0]
-
imgUrlList.push(data)
-
that.setData({
-
imgUrlList
-
})
-
}
-
i++;
-
if (i == length) {
-
that.setData({
-
imgUrlList:that.data.imgUrlList
-
})
-
console.log(that.data.imgUrlList)
-
}
-
else { //递归调用uploadDIY函数
-
that.uploadDIY(filePaths, i, length, that.data.imgUrlList);
-
}
-
},
-
})
-
},
-
})
-
},
然后我们可以通过小程序中的来进行图片的选择。这里我是通过递归来将图片存入到数组里的
-
upVideo2: function (e) {
-
var that = this
-
if (that.data.imgUrlList!=undefined){
-
if (that.data.imgUrlList.length>0){
-
var imgUrlList = that.data.imgUrlList
-
}
-
}else{
-
var imgUrlList = [];
-
}
-
console.log(imgUrlList)
-
wx.chooseImage({
-
count: 8,
-
sourceType: ['album', 'camera'],// 指定文件的来源，album只允许相册中选择，camera是相机拍摄，两个都允许以逗号相隔。
-
success: function (res) {
-
-
console.log('选择',res)
-
var successUp = 0; //成功个数
-
var failUp = 0; //失败个数
-
var length = res.tempFilePaths.length; //总共个数
-
var i = 0; //第几个
-
that.uploadDIY(res.tempFilePaths, i, length, imgUrlList);
-
}
-
})
-
},
然后运行结果
到这多文件上传就写完了，这里我是直接把我的代码贴出来了，你们也不用全部复制，主要就是看这个原理，把递归看明白了代码自然就会写啦，下篇可以写一下延迟删除功能，有兴趣的可以看看哟~