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

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

微信开发者工具需要安装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测试数据pressVideo({
? ? ? ? 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、效果展示

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

查看更多关于微信小程序实现上传视频功能的详细内容...