图片上传是常见功能,在微信小程序中怎么实现呢?
介绍两个api
wx.chooseImage - 选择图片
从本地相机中选择图片 - wx.chooseImage(Object object) | 微信开放文档
上传 - UploadTask | 微信开放文档
单张图片上传
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'common/common/uploadFile',
name: 'file',
filePath: res.tempFilePaths,
header: {
'Authorization': `bearer ${token}`
},
formData: {
file: res.tempFilePaths[0],
},
success: (res) => {})
}
})
多张图片上传
对于多张的图片上传,可以选择多张之后,调用upload每一张上传,也就是循环upload.
第二种是转换为base64,多张一次性调用接口上传
this.data = > 所有的base64集合,showData可以直接在img标签中显示图片
wx.chooseImage({
count: 1,
success: (res) => {
)
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0],
encoding: "base64",
success: (result) => {
this.showData = 'data:image/png;base64,' + result.data;
this.data =this.data.push(result.data);
}
})
}
})
上传,正常调用后端接口,传入this.data
wx.request({
url: '/uplod',
method: 'POST',
data: {imgs: this.data},
headerList: {
'content-type': 'application/x-www-form-urlencoded'
},
success (res) => {}
})