微信小程序实现上传视频功能

本文实例为大家分享了微信小程序上传视频，供大家参考，具体内容如下微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法。1、调用官方提供的方法(wx.chooseMedia)choosevi...

本文实例为大家分享了微信小程序上传视频，供大家参考，具体内容如下

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

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

choosevideo(){
  let that=this
  console.log("上传视频的方法")
  wx.chooseMedia({
   count: 1, //上传视频的个数
   mediaType:['video'], //限制上传的类型为video
   sourceType:['album', 'camera'], php//视频选择来源
   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, //选取的视频资源临时地址
     });
    }
   },
  })
 },www.cppcns.com


//视频上传
  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、效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。