微信小程序:多张图片上传攻略
微信小程序中,可以使用 wx.chooseImage()
方法来选择并上传多张图片。以下是使用 wx.chooseImage()
方法的完整攻略:
步骤1:选择图片
首先,您需要使用 wx.chooseImage()
方法选择要上传的图片。以下是一个示例代码片段,演示如何使用 wx.chooseImage()
方法选择图片:
wx.chooseImage({
count: 3, // 最多可以选择的图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
}
})
在上面的示例中,我们使用 wx.chooseImage()
方法选择了最多3张图片,并指定了图片的大小类型和来源类型。当选择完成后,将返回选定照片的本地文件路径列表。
步骤2:上传图片
接下来,您可以使用 wx.uploadFile()
方法将选择的图片上传到服务器。以下是一个示例代码片段,演示如何使用 wx.uploadFile()
方法上传图片:
wx.uploadFile({
url: 'https://example.com/upload', // 上传图片的接口地址
filePath: tempFilePaths[0], // 要上传的图片的本地文件路径
name: 'file', // 上传图片的名称,后端可以通过这个名称获取文件
formData: {
'user': 'test' // 其他额外的参数
},
success: function (res) {
var data = res.data
// do something
}
})
在上面的示例中,我们使用 wx.uploadFile()
方法将选择的第一张图片上传到指定的接口地址。我们指定了要上传的图片的本地文件路径、上传图片的名称和其他额外的参数。当上传完成后,将返回上传结果。
示例1:上传多张图片
以下是一个示例代码片段,演示如何上传多张图片:
wx.chooseImage({
count: 3,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
for (var i = 0; i < tempFilePaths.length; i++) {
wx.uploadFile({
url: 'https://example.com/upload',
filePath: tempFilePaths[i],
name: 'file',
formData: {
'user': 'test'
},
success: function (res) {
var data = res.data
// do something
}
})
}
}
})
在上面的示例中,我们使用 wx.chooseImage()
方法选择最多3张图片,并使用 for
循环将每张图片上传到指定的接口地址。
示例2:显示上传进度
以下是一个示例代码片段,演示如何显示上传进度:
wx.uploadFile({
url: 'https://example.com/upload',
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: function (res) {
var data = res.data
// do something
},
fail: function (res) {
console.log(res)
},
complete: function (res) {
console.log(res)
},
progress: function (res) {
console.log('上传进度:' + res.progress)
console.log('已经上传的数据长度:' + res.totalBytesSent)
console.log('预期需要上传的数据总长度:' + res.totalBytesExpectedToSend)
}
})
在上面的示例中,我们使用 wx.uploadFile()
方法上传图片,并使用 progress
回调函数显示上传进度。当上传进度发生变化时,将输出上传度、已经上传的数据长度和预期需要上传的数据总长度。
以上是关于微信小程序多张图片上传的完整攻略,包括选择图片、上传图片和两个示例说明。