微信小程序开发实现视频的上传（官方提供了API，基本直接调用就可以了）
我要评论<!--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>
// 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(){
//调用服务器保存视频信息接口
}
})
/* 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;
}
{
"navigationBarTitleText": "视频上传",
"usingComponents": {}
}
需要源码的可点击此处获取
本文地址：https://blog.csdn.net/qq_26383975/article/details/107311004
如对本文有疑问， 点击进行留言回复！！
Unity Android playerSetting相关设置
元素分类，块级元素，内联元素，行内块元素，displaby 属性
网友评论