小程序上传多张照片
由于小程序api接受一张一张上传,所有利用递归方法,直到多张上传完成。 如有问题可留言(该方法没有封装)
<!-- wxml 可自己写页面,也可复制下面代码 -->
<view class='up-pic' style="padding-bottom:100rpx;">
<view class='row pic-box'>
<text class="file_title">上传照片:</text>
<block wx:key="imgbox" wx:for="{{picArr}}">
<view class='add-pic'>
<image class='add-pic' src="{{item}}" data-index="{{index}}" bindtap="picPreview"></image>
<view class='img-de' bindtap="deleteImg" data-index="{{index}}">
x
</view>
</view>
</block>
<view class='add-pic'>
<view class='btn' bindtap='chooseImage'>+</view>
</view>
</view>
</view>
/* wxss 可自己写页面,也可复制下面代码 */
.up-pic{
width: 100%;
padding-bottom: 200rpx;
justify-content: center;
background: #fff;
}
.pic-box{
flex-flow:wrap;
width:95%;
margin-bottom: 30rpx;
}
.ap-box{
position: relative;
}
.add-pic{
width: 108rpx;
height: 108rpx;
margin-right: 20rpx;
position: relative;
margin: 20rpx 30rpx 20rpx 30rpx;
}
.file_title {
padding: 0rpx 60rpx;
display: block;
width: 100%;
}
//js 才是关键
// 相机选择图片或者拍照
chooseImage(e) {
let that = this
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
wx.showLoading({
title: '正在上传',
})
var tempFilePaths = res.tempFilePaths; //最多九张,所有的照片url都在这个数组里
var length = res.tempFilePaths.length; //总共个数
var i = 0; //由于小程序需要一张一张上传,所有要递归
that.uploadPic(tempFilePaths,i,length) //选中照片后调用上传接口
}
})
},
uploadPic(filePaths,i,length){
let that = this
var token = wx.getStorageSync('token') || ''
wx.uploadFile({
url: myUrl.httpUrl+'/attachment/uploadFile', // 接口,替换成自己的就行
filePath: filePaths[i],
name: 'file',
header: {
'content-type': 'multipart/form-data;charset=UTF-8',
'token': token
},
formData: {
method: 'POST' //请求方式
},
success: (res) => {
let data = JSON.parse(res.data)
if(res.statusCode == 200){
if(data.code == 200){
that.setData({
saveIdPic: that.data.saveIdPic.concat(data.data), //上传成功后接口返回的id,保存时后台需要
})
// 成功后显示的照片,filePaths为照片的所有url,获取照片时拿的
if(i == length-1) {
that.setData({
picArr: that.data.picArr.concat(filePaths)
})
}
}else if(data.code == 3000 || data.code == 2008){ //接口状态码,可自行判断
wx.showToast({
title: data.msg,
image: '../../images/iconalert.png',
duration:1500
})
setTimeout(function(){
wx.redirectTo({
url:'/pages/login/login'
})
},1500)
}else{
wx.showToast({
title: data.msg,
image: '../../images/iconalert.png'
})
}
}else{
wx.showToast({
title: data.msg,
image: '../../images/iconalert.png'
})
}
},
fail: (res) => {
wx.hideLoading();
wx.showToast({
title: res,
image: '../../images/iconalert.png'
})
},
complete: () => { //重点,i这里递归,如果一次上传多张,则一张一张的调用,直到上传所有照片
i ++;
if(i == length)
{
wx.hideLoading()
}
else
{ //重新调用上传接口
that.uploadPic(filePaths,i,length);
}
},
});