微信小程序开发实现视频的上传（官方提供了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',//默认拉起的是前置或者后置摄像头，默认backcompressed: 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 = durationif(parseFloat(size) > 100){that.setData({clickFlag: true,duration: ''})let beyondSize = parseFloat(size) - 100wx.showToast({title: '上传的视频大小超限，超出'+beyondSize+'MB,请重新上传',//image: '',//自定义图标的本地路径，image的优先级高于iconicon:'none'})}else{//2.本地视频资源上传到服务器that.uploadFile(tempFilePath)}},fail: function() {// fail},complete: function() {// complete}})},/*** 将本地资源上传到服务器* */uploadFile:function(tempFilePath){let that = thislet 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: {}, // 设置请求的 headerformData: {third_session: third_session}, // HTTP 请求中其他额外的 form datasuccess: function(res){console.log("uploadFile",res)// successlet 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() {// failwx.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": {}
}
需要源码的可点击此处获取
后台服务器代码
