微信小程序雲開發-雲存儲-上傳文件（圖片/視頻）到雲存儲 精簡代碼

說明 圖片/視頻這類文件是從客戶端會話選擇文件。

 

一、wxml文件添加if切換顯示

<!--上傳文件到雲存儲-->
<button bindtap="chooseImg" type="primary" >上傳單張圖片</button>
<button bindtap="chooseVideo" type="primary" >上傳單個視頻</button>
<view class="myFile">
  <image wx:if="{{showImage}}" src="{{imageUrl}}"></image>
  <video wx:if="{{showVideo}}" src="{{videoUrl}}"></video>
</view>

二、wxss文件

.myFile{
  margin: 30rpx auto;
  text-align: center;
}

button{
  margin: 30rpx;
}

 

三、js文件

 

1、定義data

初始值賦值，定義圖片和視頻初始的顯示狀態（都隱藏不顯示）

  data:{
    //默認圖片和視頻都不顯示
    showImage:false,
    showVideo:false
  },

 

2、上傳圖片和上傳視頻的代碼整合

將uploadImg()和uploadVideo()整合成uploadFile()

uploadFile(tempFile,fileName,type){    //傳遞三個參數，tempFile是所選文件的臨時路徑，fileName是上傳到雲存儲的cloudPath的值,type表示上傳的文件類型（1表示上傳圖片，2表示上傳視頻）
    console.log("要上傳文件的臨時路徑",tempFile)
    let timestamp = (new Date()).valueOf()
    wx.cloud.uploadFile({
      cloudPath: fileName,          //雲存儲的路徑
      filePath: tempFile,           // 文件路徑
    }).then(res => {
      console.log("上傳成功",res)
      wx.showToast({
        title: '上傳成功',
        icon:"success",
        duration:2000
      })
      let that = this
      if(type==1){
        setTimeout(function(){
          that.setData({
            imageUrl:res.fileID,
            showImage:true,   //顯示圖片
            showVideo:false   //隱藏視頻
           })
      },2000)
      }else if(type ==2){
        setTimeout(function(){
          that.setData({
            videoUrl:res.fileID,
            showImage:false,
            showVideo:true
           })
      },2000)   
      }
      
    })
    .catch(err => {
      console.log("上傳失敗",err);
    })
  }

 

3、在chooseImg()函數和chooseVideo()函數中分別調用整合后的上傳文件函數uploadFile()

1.在chooseImg()函數中調用uploadFile()

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])

        //調用uploadFile()實現上傳文件功能
        let timestamp = (new Date()).valueOf()
        that.uploadFile(tempFilePaths[0],+timestamp+'.png',1) //傳遞三個參數
      }
    })
  }

 

2.在chooseVideo()函數中調用uploadFile()

chooseVideo(){
    let that = this
    wx.chooseVideo({
      sourceType: ['album','camera'],
      maxDuration: 60,
      camera: 'back',
      success(res) {
        //console.log(res.tempFilePath);
        console.log("----------",res.tempFilePath);
        wx.showLoading({
          title: '上傳中',
         })
      //調用uploadImg(tempFile)函數，實現圖片上傳功能
      //that.uploadVideo(res.tempFilePath)

      //調用uploadFile()實現上傳文件功能
      let timestamp = (new Date()).valueOf()
      that.uploadFile(res.tempFilePath,+timestamp+'.mp4',2) //傳遞三個參數（第一個參數傳遞所選文件的臨時路徑，第二個參數傳遞雲存儲的路徑，第三個參數傳遞上傳文件的類型）
      }
    })
  }

 四、最終效果