IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 微信小程序上传视频功能的简单实现 -> 正文阅读

[移动开发]微信小程序上传视频功能的简单实现

微信小程序上传视频

微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法。

1,调用官方提供的方法(wx.chooseMedia)

choosevideo(){
    let that=this
    console.log("上传视频的方法")
    wx.chooseMedia({
      count: 1,  //上传视频的个数
      mediaType:['video'],  //限制上传的类型为video
      sourceType:['album', 'camera'], //视频选择来源
      maxDuration: 58, //拍摄限制时间
      camera: 'back',  //采用后置摄像头
      success:function(res){
        //获取临时存放的视频资源
        let tempFilePath=res.tempFiles[0].tempFilePath
        //获取该视频的播放时间
        let duration=res.tempFiles[0].duration
        console.log("视频播放时间为"+duration)
        //获取视频的大小(MB单位)
        let size=parseFloat(res.tempFiles[0].size/1024/1024).toFixed(1)
        console.log("视频大小为"+size)
        //获取视频的高度
        let height=res.tempFiles[0].height
        console.log("视频高度为"+height)
        //获取视频的宽度
        let width=res.tempFiles[0].width
        console.log("视频宽度为"+width)
        //校验大小后,符合进行上传
        if(size>20){
            let beyongSize=size-20 //获取视频超出限制大小的数量
            Toast("上传的视频大小超限,超出"+beyongSize+"MB,请重新上传!")
            return
        }else{
          //符合大小限制,进行上传
          console.log("开始上传!!!")
          that.uploadvideo({
            url: api.uploadfiletofastdfs, //视频上传的接口
            path: tempFilePath, //选取的视频资源临时地址
          });
        }
      },
    })
  },


 //视频上传
    uploadvideo: function (data) {
      wx.showLoading({
        title: '上传中...',
        mask: true,
      })
      var that = this
      //	视频压缩
      wx.compressVideo({
        quality: 'high',
        src: data.path,
        success:function(res){
          let size=parseFloat(res.size/1024/1024).toFixed(1)
          console.log("压缩后视频大小为"+size)
          that.setData({
            sptemp:res.tempFilePath
          })
          //上传视频
          wx.uploadFile({
            url: data.url,
            filePath: res.tempFilePath,
            name: 'uploadFile',
            header: {
              "X-Access-Token":wx.getStorageSync('token')
            },
            success: (resp) => {
              wx.hideLoading();
              //获取fastDFS返回的存储路径
              console.log(resp)
            },
          });
        },
      })   
    },

2,页面中用标签将上传的视频显示出来

<video  src="{{sptemp}}" ></video>

3,效果展示
在这里插入图片描述

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-05-18 17:46:02  更:2022-05-18 17:48:22 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 1:19:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码