上传多个小程序中的照片通常涉及以下步骤:
选择图片
使用微信小程序提供的`wx.chooseImage` API选择图片。可以指定选择图片的数量、尺寸类型(原图或压缩图)和来源类型(相册或相机)。
递归上传
如果需要上传的图片数量较多,可以采用递归的方式逐个上传。即每次选择一定数量的图片,然后调用上传接口,直到所有图片都上传完成。
上传图片
使用`wx.uploadFile` API将选择的图片上传到服务器。需要提供上传地址和图片路径列表。
处理上传结果
根据上传结果更新上传成功的个数和失败个数,并在前端显示上传进度或结果。
```javascript
// 页面初始数据
data: {
images: [], // 选择的图片列表
successUp: 0, // 上传成功的个数
failUp: 0, // 上传失败的个数
count: 0, // 当前上传的图片序号
length: 0 // 图片列表的总长度
},
// 选择图片
wx.chooseImage({
count: 9, // 默认9张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
success: function(res) {
var that = this;
var tempFilePaths = res.tempFilePaths; // 获取选定的照片的本地文件路径列表
that.setData({
images: that.data.images.concat(tempFilePaths), // 将新选择的图片添加到列表中
successUp: that.data.successUp + 1, // 上传成功的个数加1
count: that.data.count + 1 // 上传的图片序号加1
});
that.uploadOneByOne(serverUrl + '/secondHand/uploadImg?id=' + secondHandId, that.data.images, that.data.successUp, that.data.failUp, that.data.count, that.data.length); // 调用递归上传方法
}
});
// 递归上传方法
uploadOneByOne: function(url, imgPaths, successUp, failUp, count, length) {
if (count > length) {
return; // 如果所有图片都已上传完成,返回
}
wx.uploadFile({
url: url,
filePath: imgPaths[count],
name: 'file',
success: function(res) {
var that = this;
if (res.statusCode === 200) {
that.setData({
successUp: successUp + 1,
failUp: failUp
});
that.uploadOneByOne(url, imgPaths, successUp, failUp, count + 1, length); // 递归调用上传下一个图片
} else {
that.setData({
failUp: failUp + 1
});
}
},
fail: function() {
that.setData({
failUp: failUp + 1
});
}
});
}
```
建议
图片格式和大小:确保上传的图片格式(如JPEG、JPG、PNG、GIF)符合小程序的要求,并且图片大小不超过10MB。
错误处理:在上传过程中,应处理可能出现的错误,如网络问题或服务器错误,并提供相应的用户反馈。
进度显示:在上传过程中,显示上传进度,让用户了解当前上传状态。