云开发（微信-小程序）笔记（九）----云存储，你来了（下）

云开发（微信-小程序）笔记（八）----云存储，你来了（中）

1.视频上传

官网文档：
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
1.编写js文件

Page({
   //选择上传的视频
  chooseVideo(){
    wx.chooseVideo({
      sourceType: ['album','camera'], //从相册选择视频或拍摄视频
      maxDuration: 60, //视频时长（s）
      camera: 'back',
      success: res => {
        this.uploadFile(res.tempFilePath,'cat god 007.mp4', 2)
      }
      })
  },
  //上传视频到云存储
   uploadVideo(temFile){
     console.log('视频文件临时路径',temFile)
     wx.cloud.uploadFile({
       cloudPath: 'cat god 007.mp4',
       filePath: temFile, //视频文件路径
       success: res => {
         console.log('上传视频成功',res)
       },
       fail(err){
         console.log('上传视频失败',err)
       }
     })
   },
  })

2.编写wxml文件

<button bindtap="chooseVideo">请上传视频</button>

2.对图片，视频上传进行优化

主要优化在于js部分
1.优化js部分

// pages/cloud storag/cloud storag.js
Page({
  data: {
    showImg: false,
    showVideo: false,
    fileId: ''
  },
  //选择上传的图片
  chooseImg(){
    wx.chooseImage({
      count: 1, //选择多少张图片
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],  //设置图片来源
      success: res => {
        this.uploadFile(res.tempFilePaths[0],'cat god 007.jpg', 1)   //将上传的第一张图片传入uploadImg方法中
      }
    })
  },
    //选择上传的视频
    chooseVideo(){
      wx.chooseVideo({
        sourceType: ['album','camera'], //从相册选择视频或拍摄视频
        maxDuration: 60, //视频时长（s）
        camera: 'back',
        success: res => {
          this.uploadFile(res.tempFilePath,'cat god 007.mp4', 2)
        }
        })
    },
  //上传图片，视频到云存储(1:照片，2：视频)，并对上传的照片或视频进行展示
  uploadFile(temFile,fileName,type){
    console.log('图片文件临时路径',temFile)
    wx.cloud.uploadFile({
      cloudPath: fileName,
      filePath: temFile, //图片文件路径
      success: res => {
        console.log('上传成功')
        if (type == 1){
        this.setData({
          imgUrl: res.fileID,
          showImg: true,   //显示照片
          showVideo: false //隐藏视频
        })
      } else if (type == 2){
        this.setData({
          videoUrl: res.fileID,
          showImg: false,  //隐藏照片
          showVideo: true  //显示视频
        }) 
      }
      },
      fail(err){
        console.log('上传失败',err)
      }
    })
  },

2.编写wxml部分

<!--pages/cloud storag/cloud storag.wxml-->
<button bindtap="chooseImg">请上传图片</button>
<button bindtap="chooseVideo">请上传视频</button>
<image wx:if="{{showImg}}" src="{{imgUrl}}"></image>
<video wx:if="{{showVideo}}" src="{{videoUrl}}"></video>

效果图

3.上传world,pdf等文件到云存储

官网文档：
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

例1:上传文件（上传所有文件）

1.编写js部分

Page({
  //选择文件
  chooseFile(){
    wx.chooseMessageFile({
      count: 10,//选择多少个文件
      type: 'all',
      success: res =>{
        console.log(res)
  this.uploadFile(res.tempFiles[0].name,res.tempFiles[0].path)
      }
    })
  },
  //上传文件到云存储
  uploadFile(name,tempUrl){
    wx.cloud.uploadFile({
      cloudPath: name,
      filePath: tempUrl,
      success: res => {
        console.log("上传成功",res)
      }
    })
  }
}）

2.编写wxml部分

<button bindtap="chooseFile">上传文件</button>

3.进行调试，测试

4.从云存储下载world,pdf等文件到本地

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/downloadFile/client.downloadFile.html

1.编写js文件

Page({
  //获取用户输入的下载链接
  getContent(e){
    this.setData({
    fileId: e.detail.value
    })
  },
  //下载文件
  downloadFile(){
    let fileId = this.data.fileId
    console.log('下载链接',fileId)
    if (fileId != null && fileId.length > 0){
      wx.cloud.downloadFile({
        fileID: fileId
      })
      .then( res => {
        console.log('下载文件成功',res)
        //打开下载的文件
      //   wx.openDocument({
      //     filePath: res.tempFilePath,
      //     success: function (res) {
      //       console.log('打开文档成功')
      //     }
      //   })
      }) 
      .catch( res =>{
        console.log('下载文件失败',res)
      })
   })

2.编写wxml文件

请输入下载链接
<input bindinput="getContent"></input>
<button bindtap="downloadFile">下载文件</button>

效果图如下

5.上传，下载并查看已下载好的文件

https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

1.编写并修改js文件

Page({
  data: {
    fileId: ''
  },
 //选择文件
  chooseFile(){
    wx.chooseMessageFile({
      count: 1,//选择多少个文件
      type: 'all',
      success: res =>{
        console.log(res)
        this.uploadFile(res.tempFiles[0].name,res.tempFiles[0].path)
      }
    })
  },
  //上传文件到云存储
  uploadFile(name,tempUrl){
    wx.cloud.uploadFile({
      cloudPath: name,
      filePath: tempUrl,
      success: res => {
        console.log("上传成功",res)
      }
    })
  },
  //获取用户输入的下载链接
  getContent(e){
    this.setData({
    fileId: e.detail.value
    })
  },
  //下载文件
  downloadFile(){
    let fileId = this.data.fileId
    console.log('下载链接',fileId)
    if (fileId != null && fileId.length > 0){
      wx.cloud.downloadFile({
        fileID: fileId
      })
      .then( res => {
        console.log('下载文件成功',res)
        //打开下载的文件
        wx.openDocument({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      }) 
      .catch( res =>{
        console.log('下载文件失败',res)
      })
    }else{
      wx.showToast({
        icon: 'none', //不要勾
        title: '下载链接为空',
      })
    }
  }
})

2.修改wxml,显示到界面

<button bindtap="chooseFile">上传文件</button>
请输入下载链接
<input bindinput="getContent"></input>
<button bindtap="downloadFile">下载文件</button>

3.修改wxss,显示边框

/* pages/cloud storag/cloud storag.wxss */
input{
  border: 1px solid  gray;
}

云开发（微信-小程序）笔记（十）---- 刷新中

感谢大家，点赞，收藏，关注，评论！