云开发之上传图片和视频

文章目录


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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值