从手机中选择要上传的图片
// 选择图片
chooseImage: function () {
const items = this.data.photosNew
wx.chooseImage({
count: 9, //最多可以选择的图片总数
sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机,默认二者都有
success: res => {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths
for (const tempFilePath of tempFilePaths) {
items.push({
src: tempFilePath
})
}
this.setData({ photosNew: items })
}
})
},
上传图片到云存储
当我们选择好图片后,存在想删除图片并重新选择的可能,所以还需要支持图片的删除功能。删除功能是通过点击图片右上角的icon图标来实现的。我们已经在wxml代码的icon组件中注册了deletelmage事件。在post-comment.js中添加deletelmage方法
删除图片的逻辑非常简单,只需要获取当前删除图片的序号,并将该图片的URL从this.chooseFiles数组中删除,重新绑定chooseFiles变量即可。保存并重新运行代码,就可以通过点击已选择图片右上角的叉叉按钮删除图片了,删除图片后,可以重新选择图片。
errMsg:"cloud.uploadFile:ok"
fileID:"cloud://debug-14e7f7.6465-debug-14e7f7/1547845511248-9230352.png"
statusCode:200
https://github.com/TencentCloudBase/tcb-juejin-workshops/blob/master/album/pages/photos/add.js