小程序实现上传视频功能

2023-07-18 15:03:03 244

本文实例为大家分享了小程序实现上传视频功能的具体代码，供大家参考，具体内容如下

.js文件

//miniprogram/pages/message/messageForm/messageForm.js
Page({

/**
*页面的初始数据
*/
data:{
webServer:'https://xxxx.xxx.com',
src:'',
webviewshow:'hide',
webviewurl:'',
gid:"",
uid:'',
duration:'',
height:'',
size:'',
width:'',
ThumbPath:false,
videoshow:'hide'
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
this.setData({
gid:options.gid,
uid:options.uid
})
},

chooseVideo:function(){
varthat=this
wx.chooseVideo({
success:function(res){
that.setData({
src:res.tempFilePath,
})
}
})
},
getLocalVideo:function(){
varthat=this;
varsession_key=wx.getStorageSync('session_key');
wx.chooseVideo({
maxDuration:10,
success:function(res1){
//这个就是最终拍摄视频的临时路径了
that.setData({
src:res1.tempFilePath,
duration:res1.duration,
height:res1.height,
size:res1.size,
width:res1.width,
videoshow:'thumb'
})
wx.showToast({
title:'选择成功',
icon:'succes',
duration:2000,
mask:true
})
},
fail:function(){
console.error("获取本地视频时出错");
}
})
},
uploadvideo:function(){
varthat=this;
wx.showLoading({
title:'上传中',
})
varsrc=this.data.src;
if(src){
that.setData({
ThumbPath:true
})
}
wx.uploadFile({
url:that.data.webServer+'xxxxxx',//服务器接
formData:{
'uid':that.data.uid,
'gid':that.data.gid,
'duration':that.data.duration,
'height':that.data.height,
'size':that.data.size,
'width':that.data.width
},
method:'POST',//这句话好像可以不用
filePath:src,
header:{
'content-type':'multipart/form-data'
},
name:'files',//服务器定义的Key值
success:function(e){
wx.hideLoading();
if(typeofe.data!='object'){
e.data=e.data.replace(/\ufeff/g,"");//重点
vardata=JSON.parse(e.data);
if(data.status==1){
wx.showToast({
title:'上传成功',
icon:'succes',
duration:1000,
mask:true
})
setTimeout(function(){
that.backHtml();
},1000)
}elseif(data.status==2){
wx.showToast({
title:'文件过大',
icon:'succes',
duration:1000,
mask:true
})
}
}
},
fail:function(){
wx.showToast({
title:'上传失败',
icon:'succes',
duration:1000,
mask:true
})
}
})
},
backHtml:function(){
varthat=this;
wx.reLaunch({
url:'/pages/index/index?gid='+this.data.gid
})
},


/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){

},

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

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

.wxml






选择视频
上传视频

.wxss

.thumbbox{
display:flex;
justify-content:center;
align-items:center;
}

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

小程序实现上传视频功能

热门推荐

随机推荐