微信小程序雲開發-雲存儲-上傳單張照片到雲存儲並顯示到頁面上

一、wxml文件

頁面上寫上傳圖片的按鈕，按鈕綁定chooseImg。

<button bindtap="chooseImg" type="primary" class="uploadImg">上傳單張圖片</button>
<view class="myImage">
<image src="{{imageUrl}}"></image>
</view>

二、wxss文件

.myImage{
  margin: 30rpx auto;
  text-align: center;
}
image{
  width: 420rpx;
  height: 300rpx;
}
.uploadImg{
  margin: 30rpx;
}

 

三、js文件

Page({
  //第一步：選擇要上傳的圖片
  chooseImg(){
    let that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        console.log("選擇成功",res);
        wx.showLoading({
          title: '上傳中',
         })
        // tempFilePath可以作為img標簽的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths 

        //調用uploadImg(tempFile)函數，實現圖片上傳功能
        that.uploadImg(tempFilePaths[0])
      }
    })
  },
  //第二步：上傳所選圖片到雲存儲
  uploadImg(tempFile){
    console.log("要上傳圖片的臨時路徑",tempFile)
    let timestamp = (new Date()).valueOf()
    wx.cloud.uploadFile({
      cloudPath: +timestamp+'.png',  //雲存儲的路徑，開發者自定義
      filePath: tempFile,           // 文件路徑
    }).then(res => {
      console.log("上傳成功",res)
      wx.showToast({
        title: '上傳成功',
        icon:"success",
        duration:2000
      })
      let that = this
       setTimeout(function(){
        that.setData({
          imageUrl: res.fileID
         })
    },2000)
    })
    .catch(err => {
      console.log("上傳失敗",err);
    })
  }
})

四、界面展示