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

news/2024/7/20 2:31:47 标签: 小程序, 云开发, javascript

上传视频到云存储

wx.chooseVideo(Object object)

 1.选择要上传的视频

javascript"> //上传视频,第一步选择要上传的视频
    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.和上传图片一样的上传步骤

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

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

javascript"> //第二步:直接上传图片或视频到云存储
     uploadFile(temFile,fileName){
        console.log('要上传图片的临时路径',temFile)
        wx.cloud.uploadFile({
            cloudPath:fileName,//这个的命名是在云存储的命名
            filePath:temFile,
        })
        .then(res=>{
            console.log('上传成功',res)
        })
        .catch(err=>{
            console.log('上传失败',err)
        })
    }
javascript"> 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 参数,区分上传的是图片还是视频

javascript">  //第二步:直接上传图片或视频到云存储
    //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.实现效果


http://www.niftyadmin.cn/n/1243412.html

相关文章

小程序云开发入门——关于云存储那些事(3)

上传word和pdf等文件到云存储 1.设置按钮和点击事件 <button bindtap"chooseFile">选择文件</button> 2.第一步选择文件 //上传文件第一步&#xff1a;选择文件chooseFile() {wx.chooseMessageFile({count: 1,type: all,}).then(res>{console.log(r…

小程序云开发入门——列表下拉刷新

1.准备工作&#xff1a; 新建shuaxin页面&#xff0c;并将之前编写过的有图片的商品列表代码搬过来。&#xff08;简单回顾一下&#xff09; shuaxin.wxml <view wx:for"{{list}}"> <!--增加点击事件&#xff0c;跳转详情页--><view class"it…

解决Windows10系统,Android Studio中 按Ctrl + Alt + 方向键 与系统屏幕翻转快捷键冲突问题

一、问题描述 在Android Studio和PyCharm等软件中&#xff0c;都有类似的快捷键 Back 快捷键是 Ctrl Alt 向左按钮 Forward 来看看是 Ctrl Alt 向右按钮 有时候编辑代码过程中&#xff0c;想Back或者Forward来查看代码&#xff0c;发现快捷键居然和系统旋转屏幕的快捷键…

小程序云开发入门——分页加载数据(1)

目录 目录 修改数据表的权限并请求数据 通过按钮点击展示分页效果 把请求到的数据展示在页面上 在下拉触底的时候做分页加载 设置数据加载中和加载完毕的提示 完整代码展示&#xff1a; 修改数据表的权限并请求数据 1.准备工作&#xff1a;新建fenye页面&#xff0c;并导入…

【转载】Android功耗改进

原文地址&#xff1a;《Android功耗改进》 by 保罗的酒吧 最近几年中&#xff0c;Google在一直极力的改进Android系统的续航能力。在本文中&#xff0c;我们将看到Andrdoi自5.0到8.0这几个版本中对于功耗方面的改进。 前言 移动设备的续航时间无疑是所有用户都非常在意的。我们…

小程序云开发入门——分页加载数据(2)

用云函数做分页加载 1.新建一个fenyeyun的页面和一个fenye的云函数 2.wxml和wxss与上一节小程序的分页加载代码一样 <view wx:for"{{list}}"><view class"num">{{item.num}}</view> </view> .num{height: 50px;background-colo…

【我的Android进阶之旅】解决 Exported receiver/service does not require permission

一、问题描述 最近切换到一个新的项目中,查看代码的时候,发现AndroidManifest.xml清单文件有一堆的警告 Service警告 <serviceandroid:name=".oyp.CSDNService"android:enabled="true"

Day1.MarkDown学习

MarkDown学习 标题 一级标题&#xff1a;# 空格 内容 二级标题&#xff1a;# # 空格 内容 三级标题&#xff1a;### 空格 内容 四级标题&#xff1a;#### 空格 内容 五级标题&#xff1a;##### 空格 内容 六级标题&#xff1a;###### 空格 内容 &#xff08;最高…