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

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

微信开发者工具需要安装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、效果展示

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

(0)

相关推荐

  • 微信小程序上传图片功能(附后端代码)

    几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OBJECT)实现 官方示例代码 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来

  • 微信小程序实现文件、图片上传功能

    本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下 在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用. 这里我说一下微信小程序如何实现图片的上传 1.在微信公众号平台设置uploadFile合法域名 点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名. 否则会出现以下错误. 2.使用wx.chooseImage和wx.uploadFile实现图片上传 代码如下 wx.chooseImage({ count: 1

  • 微信小程序实现图片上传、删除和预览功能的方法

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

  • 微信小程序多张图片上传功能

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',

  • 微信小程序实现上传图片功能

    微信小程序图片上传,供大家参考,具体内容如下 先来看一下微信小程序的api 来看一下页面效果 查看大图 wxml文件代码: <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view clas

  • 微信小程序图片选择、上传到服务器、预览(PHP)实现实例

    微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

  • 微信小程序开发(二)图片上传+服务端接收详解

    这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的wxml代码 <view class="xd-container">

  • 微信小程序上传图片到服务器实例代码

    上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序中上传图片并进行压缩的实现代码

    小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

随机推荐