小程序实现上传视频功能
本文实例为大家分享了小程序实现上传视频功能的具体代码,供大家参考,具体内容如下
.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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。