最近在写小程序的相册,需要多张图片的上传。因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定。分享下,不足之处,多多指教哦
页面wxml:
<form bindsubmit="formSumbmit" bindreset="formReset">
<view class="modal-content">
<view class="modal-photo">
<view class="photo-img">
<view wx:for="{{img_arr}}" wx:key="key">
<image src=‘{{item}}‘></image>
</view>
</view>
</view>
</view>
<view class="modal-footer">
<view class="btn-confirm" ><button formType="submit" style="color:#00d000;">确定</button></view>
</view>
</form>
Ps:::img_arr:为存放上传的多张图片的数组,使用for和自动换行显示出来
将本地图片上传js:
upimg: function () {
console.log(‘上传图片‘);
var that = this;
if (that.data.img_arr == null) {
console.log(‘null张‘);
wx.chooseImage({
count: 9, //最多可以选择的图片张数,默认为9
sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res);
that.setData({
img_arr: res.tempFilePaths //concat
});
}
})
}
},
form表单提交,引用跳转:
formSumbmit: function (e) {
console.log(‘对话框确认按钮点击事件‘);
console.log(e);
var that = this;
var data = [];
data.photo_info = e.detail.value.photo_info;
data.timestamp = Date.parse(new Date()) / 1000; //当前时间戳
data.i = 0;
that.upload(data);
},
ok,开始将文件上传服务器:
upload: function (e) {
console.log(‘上传图片至服务器‘);
var photo_info = e.photo_info;
var timestamp = e.timestamp;
var i = e.i;
var that = this;
var length = that.data.img_arr.length;
//for (var i = 0; i < length; i++) {//循环遍历图片 //ps::这里也可以使用for循环方式一个个上传,但是因为网络等原因,不能很好地控制,故改用这种重新调用的方式来完成
var openid = app.globalData.openid;
wx.uploadFile({
url: ‘‘,//自己的接口地址
filePath: that.data.img_arr[i],
name: ‘name‘,
formData:({//上传图片所要携带的参数
openid: openid,
photoInfo: photo_info,
timestamp: timestamp,
uploadName: ‘name‘ //上传name
}),
success: function (res) {
console.log(res);
if (res) {
console.log("返回的参数信息" + res.data);
wx.showToast({
title: ‘上传中...‘,
duration: 3000,
icon: ‘loading‘
});
}
},
complete:function(){
console.log(i);
i++;
if(i == length){ //当图片传完时,停止调用
console.log(‘成功‘);
wx.showToast({
title: ‘上传成功!‘,
duration: 1500,
success: function(){
that.hideModal();
}
});
}else {
e.photo_info = photo_info;
e.timestamp = timestamp; //当前时间戳
e.i = i;
that.upload(e); //ps::这里也可以使用for循环方式一个个上传,但是因为网络等原因,不能很好地控制,故改用这种重新调用的方式来完成
}
}
})
//}
},
搞定