云开发学习3--云存储

概念：云存储是小程序用来存储需要用到的视频，音频，图片的一个云端存储空间。

一，图片的上传

步骤一：图片上传选择文档

  chooseImg() {
    wx.chooseImage({
      count: 1,//最多选择多少张图
      sizeType: ["original", "compressed"],//设置图片原图或者压缩
      sourceType: ["album", "camera"],//设置上传图片来源
      success: res => {
        console.log(res)
        // const tempFilePaths = res.tempFilePaths//这tempFilePaths作为img标签的src属性
        this.uploadImg(res.tempFilePaths[0])
      }
    })
  },

步骤二：图片上传文档

 uploadImg(temFile) {
    wx.cloud.uploadFile({
      cloudPath: "小香猪.jpg",
      filePath: temFile,
      success: res => {
        console.log("图片上传成功", res)
        //通过设置布尔值控制显示在前端的模块
        this.setData({ 
          showImg: true,//显示图片
          showVideo: false,//隐藏视频
          imgUrl: res.fileID //图片网址，结合前端的image组件使用
        })
      },
      fail: err => {
        console.log("图片上传失败", err)
      }
    })
  },

注意

打开图片进行预览，在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
文档直通车

二，视频的上传

步骤一：视频上传选择文档

  //上传视频的选择
  chooseVideo() {
    wx.chooseVideo({
      sourceType: ["album", "camera"],
      maxDuration: 60, //设置最大上传时长
      camera: "back",//是否开启可转换后置摄像头，默认只有前置
      success: res => {
        console.log(res)
        // const tempFilePaths = res.tempFilePaths//这tempFilePaths作为img标签的src属性
        this.uploadVideo(res.tempFilePath)
      }
    })
  },

步骤二：视频上传文档

uploadVideo(temFile) {
    wx.cloud.uploadFile({
      cloudPath: "小香猪.mp4",
      filePath: temFile,//每次只能上传一段视频
      success: res => {
        console.log("视频上传成功", res)
        this.setData({
          showVideo: true,//显示视频
          showImg: false,//隐藏图片
          videoUrl: res.fileID
        })
      },
      fail: err => {
        console.log("视频上传失败", err)
      }

    })
  },

注意：预览视频

文档直通车

三，word，pdf等文件的上传，该方法只能上传通话消息内的文件

步骤一：文件上传选择文档

  chooseFile() {
    wx.chooseMessageFile({
      count: 1,
      type: "all", //全部类型，还有其他类型的文件，具体查看文档
      success: res => {
        console.log(res)
        let temFile = res.tempFiles[0]
        this.uploadFile(temFile.name, temFile.path)
      }
    })
  },

步骤二：文件上传文档

uploadFile(name, tempurl,) {
    wx.cloud.uploadFile({
      cloudPath: name,
      filePath: tempurl,
      success: res => {
        console.log(res)
      }
    })
  }

四，文件下载打开与保存（所有文件格式均可）

• 当从手机端打开文件时，会自动打开手机的图片浏览器或者对应文档的阅读器如：wps。这样可以通过第三方的另存为接口来保存文件，因此在小程序内没有单独的另存为接口。

		该代码段放在下载成功的.then代码段内，实现下载并打开操作
          wx.cloud.downloadFile({
          fileID: res.fileID
        }).then(res => {
          console.log("下载成功")
          wx.openDocument({ //打开文件
            filePath: res.tempFilePath,
            success: res => {
              console.log("文件打开成功")
            }
          })
        }).catch(err => {
          console.log("下载失败")
        })

五，手机上传演示案例（可直接复制使用）

• js文件

Page({
  onLoad() {
    showImg: false
    showVideo: false
  },
  /上传图片
  //上传图片的选择
  chooseImg() {
    wx.chooseImage({
      count: 1,//最多选择多少张图
      sizeType: ["original", "compressed"],//设置图片原图或者压缩
      sourceType: ["album", "camera"],//设置上传图片来源
      success: res => {
        console.log(res)
        // const tempFilePaths = res.tempFilePaths//这tempFilePaths作为img标签的src属性
        this.uploadImg(res.tempFilePaths[0])
      }
    })
  },

  //上传图片到云存储
  uploadImg(temFile) {
    wx.cloud.uploadFile({
      cloudPath: "小香猪.jpg",
      filePath: temFile,
      success: res => {
        console.log("图片上传成功", res)
        //通过设置布尔值控制显示在前端的模块
        this.setData({ 
          showImg: true,//显示图片
          showVideo: false,//隐藏视频
          imgUrl: res.fileID
        })
      },
      fail: err => {
        console.log("图片上传失败", err)
      }
    })
  },
  /上传视频
  //上传视频的选择
  chooseVideo() {
    wx.chooseVideo({
      sourceType: ["album", "camera"],
      maxDuration: 60, //设置最大上传时长
      camera: "back",//是否开启可转换后置摄像头，默认只有前置
      success: res => {
        console.log(res)
        // const tempFilePaths = res.tempFilePaths//这tempFilePaths作为img标签的src属性
        this.uploadVideo(res.tempFilePath)
      }
    })
  },
  //上传视频到云存储
  uploadVideo(temFile) {
    wx.cloud.uploadFile({
      cloudPath: "小香猪.mp4",
      filePath: temFile,//每次只能上传一段视频
      success: res => {
        console.log("视频上传成功", res)
        this.setData({
          showVideo: true,//显示视频
          showImg: false,//隐藏图片
          videoUrl: res.fileID
        })
      },
      fail: err => {
        console.log("视频上传失败", err)
      }

    })
  },
  /上传文档
  chooseFile() {
    wx.chooseMessageFile({
      count: 1,
      type: "all", //全部类型，还有其他类型的文件，具体查看文档
      success: res => {
        console.log(res)
        let temFile = res.tempFiles[0]
        this.uploadFile(temFile.name, temFile.path)
      }
    })
  },

  uploadFile(name, tempurl,) {
    wx.cloud.uploadFile({
      cloudPath: name,
      filePath: tempurl,
      success: res => {
        console.log(res)
        /下载文件并打开（参考）
        wx.cloud.downloadFile({
          fileID: res.fileID
        }).then(res => {
          console.log("下载成功")
          wx.openDocument({ //打开文件
            filePath: res.tempFilePath,
            success: res => {
              console.log("文件打开成功")
            }
          })
        }).catch(err => {
          console.log("下载失败")
        })
      }
    })
  }

})

• wxml文件

<!-- 上传图片 -->
<button bindtap="chooseImg" type="primary">选择图片</button>
<!-- 上传视频 -->
<button bindtap="chooseVideo" type="primary">选择视频</button>
<view wx:if="{{showImg}}" >图片展示</view>
<image wx:if="{{showImg}}" src="{{imgUrl}}"></image>
<view wx:if="{{showVideo}}" >视频展示</view>
<video wx:if="{{showVideo}}" src="{{videoUrl}}"></video>

<!-- 上传文件 -->
<button bindtap="chooseFile" type="primary">选择文件</button>

六，云存储文件删除

文档直通车