欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现视频功能(一):视频上传

程序员文章站 2022-01-13 10:59:52
微信小程序开发实现视频的上传(官方提供了API,基本直接调用就可以了)一、效果图:二、代码实现1. video.wxml

微信小程序开发实现视频的上传(官方提供了API,基本直接调用就可以了)

一、效果图:

微信小程序实现视频功能(一):视频上传

二、代码实现

1. video.wxml
<!--pages/video/video.wxml-->
<view class="main">
    <view class="playerInfo">
        <view class="video" wx:if="{{clickFlag}}">
            <image class="videoContent" wx:if="{{poster}}" src="{{poster}}" mode="aspectFill" bindtap="chooseVideo"/>
            <view class="videoContent"  wx:else bindtap="chooseVideo" >
                <image class="playImg" src="../images/uploadVideo.png" mode="aspectFill"/>
            </view>
        </view>
        <view class="video" wx:else>
            <image class="videoContent" wx:if="{{poster}}" src="{{poster}}" mode="aspectFill"/>
            <view class="videoContent"  wx:else>
                <image class="playImg" src="../images/uploadVideo.png" mode="aspectFill"/>
            </view>
        </view>
    </view>
    <view class="footerbtn">
        <button type="default" style="width:40%;" bindtap = "chooseVideo" wx:if="{{clickFlag}}">上传视频</button>
        <button type="default" style="width:40%;color:#cccccc;" wx:else>上传视频</button>
        <button type="primary" style="width:40%;" bindtap = "saveVideo">保存</button>
    </view>
    <view class="videoUrlResult" wx:if="{{videoUrl}}" >
        <view class="title">上传的视频:</view>
        <!--autoplay="true" 视频自动播放-->
        <video class="videoContent" style="width: 90%;margin-left: 5%;margin-top: 20rpx;" 
               show-center-play-btn="true" src="{{videoUrl}}" object-fit="fill" 
               bindfullscreenchange="fullscreenchange">
        </video>
    </view>
</view>

2. video.js
// pages/video/video.js
var app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoUrl:"",
    poster:"",
    clickFlag:true //防重复点击 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  /**
   * 拍摄或选择视频并上传服务器
   */
  chooseVideo: function () {
    console.log("chooseVideo")
    this.setData({clickFlag: false})
 
    let that = this
    //1.拍摄视频或从手机相册中选择视频
    wx.chooseVideo({
      sourceType: ['album', 'camera'], // album 从相册选视频,camera 使用相机拍摄
      // maxDuration: 60, // 拍摄视频最长拍摄时间,单位秒。最长支持60秒
      camera: 'back',//默认拉起的是前置或者后置摄像头,默认back
      compressed: true,//是否压缩所选择的视频文件
      success: function(res){
        //console.log(res)
        let tempFilePath = res.tempFilePath//选择定视频的临时文件路径(本地路径)
        let duration = res.duration //选定视频的时间长度
        let size = parseFloat(res.size/1024/1024).toFixed(1) //选定视频的数据量大小
        // let height = res.height //返回选定视频的高度
        // let width = res.width //返回选中视频的宽度
        that.data.duration = duration
        if(parseFloat(size) > 100){
          that.setData({
            clickFlag: true,
            duration: ''
          })
          let beyondSize = parseFloat(size) - 100
          wx.showToast({
            title: '上传的视频大小超限,超出'+beyondSize+'MB,请重新上传',
            //image: '',//自定义图标的本地路径,image的优先级高于icon
            icon:'none'
          })
        }else{
          //2.本地视频资源上传到服务器
          that.uploadFile(tempFilePath)
        }
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  /**
   * 将本地资源上传到服务器
   * 
   */
  uploadFile:function(tempFilePath){
    let that = this
    let third_session = wx.getStorageSync('third_session')
    wx.showLoading({
      title: '上传进度:0%',
      mask: true //是否显示透明蒙层,防止触摸穿透
    })
    const uploadTask = wx.uploadFile({
      url: 'http://192.168.0.77:8083/upload/uploadVideo',//开发者服务器地址
      filePath:tempFilePath,//要上传文件资源的路径(本地路径)
      name:'file',//文件对应key,开发者在服务端可以通过这个 key 获取文件的二进制内容
      // header: {}, // 设置请求的 header
      formData: {
        third_session: third_session
      }, // HTTP 请求中其他额外的 form data
      success: function(res){
        console.log("uploadFile",res)
        // success
        let data = JSON.parse(res.data)
        wx.hideLoading()
        if(data.returnCode == 200){
          that.setData({
            videoUrl: data.videoUrl,
            poster: data.imgUrl,
            duration: that.data.duration,
            clickFlag:true
          })
          wx.showToast({
            title: '上传成功',
            icon: 'success'
          })
        }else{
          that.setData({
            videoUrl: '',
            poster: '',
            duration: '',
            clickFlag:true
          })
          wx.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
       
      },
      fail: function() {
        // fail
        wx.hideLoading()
        this.setData({
          videoUrl: '',
          poster: '',
          duration: '',
          clickFlag:true
        })
        wx.showToast({
          title: '上传失败',
          icon: 'none'
        })
      }
    })
    //监听上传进度变化事件
    uploadTask.onProgressUpdate((res) =>{
      wx.showLoading({
        title: '上传进度:'+res.progress+'%',
        mask: true //是否显示透明蒙层,防止触摸穿透
      })
      console.log("上传进度",res.progress)
      console.log("已经上传的数据长度,单位 Bytes:",res.totalBytesSent)
      console.log("预期需要上传的数据总长度,单位 Bytes:",res.totalBytesExpectedToSend)
    })
  },
  //保存数据库
  saveVideo(){
    //调用服务器保存视频信息接口
    
  }
})
3. video.wxss
/* pages/video/video.wxss */
.main{
    width:100%;
}
.playerInfo{
    margin: 20rpx 20rpx 0 20rpx;
}
.video{
    border :2rpx solid #cccccc;
}
.videoContent{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height: 324rpx;
    position: relative;
}
/*播放小图标*/
.playImg{
    position: absolute;
    top: 36%;
    left:46%;
    width:64rpx;
    height: 64rpx;
}
.footerbtn{
    display: flex;
    margin-top: 20rpx;
}
.button{
    width:40%;
}
.videoUrlResult{
    width: 100%;
    margin-top: 20rpx;
}
.videoUrlResult .title{ 
    font-size: 28rpx;
    font-weight: bold;
    color: red;
    margin-left: 20rpx;
}
4. video.json
{
  "navigationBarTitleText": "视频上传",
  "usingComponents": {}
}

需要源码的可点击此处获取

本文地址:https://blog.csdn.net/qq_26383975/article/details/107311004