微信小程序之多图上传
发布时间：2021-06-28 11:10 所属栏目：小程序开发教程
小程序的upLoadFile一次只能上传一张图片，需要循环调这个接口来实现多图上传，以下是示例代码，也可以直接封装成组件调用
wxml
<view class="images" bindtap="upload">
<image src="../../images/icon_shangchuan.png"></image>
<text>添加图片</text>
</view>
|
wxss
.images{
width: 134rpx;
height: 134rpx;
border:1px dashed #D8D8D8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container .images image{
width: 60rpx;
height: 60rpx;
}
|
wx.js
upload: function (e) {
var that = this;
// 上传图片的提示
if (that.data.uploaderNum >= 10) return wx.showToast({
title: "最多只能上传" + '10' + "张图",
duration: 2500,
icon: "none"
}), !1;
//选择图片
wx.chooseImage({
count: 10 - that.data.uploaderNum, // 默认10
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
that.data.uploaderList.concat(res.tempFilePaths);
var uploaderList = res.tempFilePaths;
that.setData({
uploaderList: that.data.uploaderList.concat(res.tempFilePaths),
})
that.setData({
uploaderNum: that.data.uploaderList.length
})
for (var i = 0; i < uploaderList.length; i++) {
wx.uploadFile({
url: getApp().globalData.url+'/api/upload/upload',
filePath: uploaderList[i],
name: 'file',
// 需要传的参数
formData: {
'user': 'test'
},
success: function (res) {
that.setData({
tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path)
})
}
})
}
}
})
},
|
