云开发之上传图片和视频

---

1.代码实现

只需三个api即可实现，api在官网的具体位置：
选择视频的api
选择图片的api
上传本地资源到云存储的api
选择视频比较简单，直接参照官网的代码即可实现，我们现在需要的是如何一次上传多张图片到云存储中。

由于上传本地资源的api一次性只能上传一个，所以我们只能使用循环遍历来实现，但是又需要指定图片的名字格式cloudPath，如果两次上传的名字格式相同的话，第二次的图片则会覆盖掉第一次的图片，这样显然没法实现我们想要上传多张图片的需求。

我们可以设计一个随机数来动态改变cloudPath，这样即可。
代码如下（示例）：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl: '',
    videoUrl: ''
  },
  //将视频上传到云存储
  upLoadVidep(name, tempFilePath) {
    wx.cloud.uploadFile({
      cloudPath: name,
      filePath: tempFilePath, // 文件路径
      success: res => {
        // get resource ID
        console.log(res.fileID)
      },
      fail: err => {
        // handle error
      }
    })
  },
  //将图片上传到云端
upLoadImg(tempFilePaths) {
    tempFilePaths.forEach((v, i) => {
      //每次遍历产生一个随机数 使其称为图片的名字，这样就算选择多次也不会重复
      let x = Math.random() * 100 + '.jpg'
      //console.log(i);
      wx.cloud.uploadFile({
        cloudPath: x,
        filePath: v, // 文件路径
        success: res => {
          // get resource ID
          console.log(res.fileID)
        },
        fail: err => {
          // handle error
        }
      })
    })
  },
  //点击选择图片
  chooseImg() {
    //选择图片的api
    wx.chooseImage({
      //一次选择图片的最大数量
      count: 9,
      //图片的尺寸
      sizeType: ['original', 'compressed'],
      //图片的来源
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log(res);
        // tempFilePath可以作为img标签的src属性显示图片
        this.setData({
          //数组的解构拼接
          imgUrl: [...this.data.imgUrl, ...res.tempFilePaths]
        })
        const tempFilePaths = res.tempFilePaths
        this.upLoadImg(tempFilePaths)
      }
    })
  },
  //点击选择视频
  chooseVideo() {
    wx.chooseVideo({
      //视频的来源。相册和拍摄视频
      sourceType: ['album', 'camera'],
      //视频的时长
      maxDuration: 60,
      //默认拉起前置或者后置摄像头
      camera: 'back',
      success: (res) => {
        this.setData({
          videoUrl: res.tempFilePath
        })
        let tempFilePath = res.tempFilePath
        let name = 'examp.mp4'
        this.upLoadVidep(name, tempFilePath)
      }
    })
  }
})

完成之后可在云数据库的云存储中查看。