小程序云开发-上传图片至云端并在本地显示
小程序云开发-上传图片至云端并在本地显示
以下功能为基本雏形,更加复杂的功能则依托于以下代码。
步骤:
1. 在index.wxml中,写入:
<button bindtap="uploadPhoto" type="primary">上传图片按钮</button>
<image src="{{showPhotosUrl}}"></image>
2. 在index.js中,写入:
let photoUrl=""
Page({
data: {
showPhotosUrl:""
},
uploadPhoto(){
// 1.选择图片
wx.chooseImage({
success: chooseResult => {
// 将图片上传至云存储空间
console.log("选取图片已完成")
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: new Date().getTime() + '.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
// 成功回调
success: res => {
console.log("上传中······")
console.log('上传成功,fileID为:', res.fileID)
photoUrl=res.fileID
//2.显示图片
this.setData({
showPhotosUrl:photoUrl
})
},
})
},
})
},
})