微信小程序之多圖上傳
發(fā)布時間：2021-06-28 11:10 所屬欄目：小程序開發(fā)教程
小程序的upLoadFile一次只能上傳一張圖片，需要循環(huán)調這個接口來實現(xiàn)多圖上傳，以下是示例代碼，也可以直接封裝成組件調用
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',
// 需要傳的參數(shù)
formData: {
'user': 'test'
},
success: function (res) {
that.setData({
tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path)
})
}
})
}
}
})
},
|
