0
点赞
收藏
分享

微信扫一扫

小程序云开发入门——关于云函数那些事(2)

驚鴻飛雪 2022-02-07 阅读 56

上传视频到云存储

wx.chooseVideo(Object object)

 1.选择要上传的视频

 //上传视频,第一步选择要上传的视频
    chooseVideo(){
        wx.chooseVideo({
          camera:'back',//后置或前置摄像头
          compressed: true,
          maxDuration: 60,//视频最长的秒数
          sourceType: ['album','camera'],//从相册选择视频或拍摄视频
        }).then(res=>{
            console.log(res.tempFilePath)
            this.uploadVideo(res.tempFilePath)
        }).catch(err=>{
            console.error('选择视频失败',err)
        })
    }

2.和上传图片一样的上传步骤

  //第二步:直接上传视频到云存储
    uploadVideo(temFile){
        console.log('要上传视频的临时路径',temFile)
        wx.cloud.uploadFile({
            cloudPath:'一个简单的视频.mp4',//这个的命名是在云存储的命名
            filePath:temFile,
        })
        .then(res=>{
            console.log('上传成功',res)
        })
        .catch(err=>{
            console.log('上传失败',err)
        })
    }

3.精简上传图片和视频的代码

 //第二步:直接上传图片或视频到云存储
     uploadFile(temFile,fileName){
        console.log('要上传图片的临时路径',temFile)
        wx.cloud.uploadFile({
            cloudPath:fileName,//这个的命名是在云存储的命名
            filePath:temFile,
        })
        .then(res=>{
            console.log('上传成功',res)
        })
        .catch(err=>{
            console.log('上传失败',err)
        })
    }
 chooseImg(){
        wx.chooseImage({
            //上传图片第一步:选择你要上传的图片
            count: 1,//可以选择的图片数量
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],//设置图片来源
          })
          .then(res=>{
            console.log('选择成功',res)
            this.uploadFile(res.tempFilePaths[0],'一张普通的照片.jpg')
        })
        .catch(err=>{
            console.log('选择失败',err)
        })
    },
    //上传视频,第一步选择要上传的视频
    chooseVideo(){
        wx.chooseVideo({
          camera:'back',//后置或前置摄像头
          compressed: true,
          maxDuration: 60,//视频最长的秒数
          sourceType: ['album','camera'],//从相册选择视频或拍摄视频
        }).then(res=>{
            console.log(res.tempFilePath)
            this.uploadFile(res.tempFilePath,'一个视频.mp4')
        }).catch(err=>{
            console.error('选择视频失败',err)
        })
    }

官方给的二合一写法: 

视频和图片的预览 

1.修改wxml页面,设置图片/视频的动态显示

 2.初始化showImg和showVideo的初始值

3.设置type 参数,区分上传的是图片还是视频

  //第二步:直接上传图片或视频到云存储
    //type 1代表图片 ,2 代表视频
    uploadFile(temFile, fileName, type) {
        console.log('要上传图片的临时路径', temFile)
        wx.cloud.uploadFile({
                cloudPath: fileName, //这个的命名是在云存储的命名
                filePath: temFile,
            })
            .then(res => {
                console.log('上传成功', res)
                if (type == 1) { //图片
                    this.setData({
                        imgUrl: res.fileID,
                        showImg: true, //显示图片
                        showVideo: false //隐藏视频
                    })
                } else if (type == 2) { //视频
                    this.setData({
                        vedioUrl: res.fileID,
                        showImg: false, //隐藏图片
                        showVideo: true //显示视频
                    })
                }
            })
            .catch(err => {
                console.log('上传失败', err)
            })
    }

 4.实现效果

 

 

举报

相关推荐

0 条评论