vue实现移动端input上传视频、音频


Posted in Javascript onAugust 18, 2020

vue移动端input上传视频、音频,供大家参考,具体内容如下

html部分

<div class="title">现场视频</div>
 <div class="upLoad">
  <label for="pop_video" id="labelr">
  <video id="videoId" controls width="100%"></video>
  <input style="display:none;" id="pop_video" type="file" accept="video/*" capture="camcorder" v-on:change="getVideo(event, '2')" name="fileTrans" ref="file" value="">
  <div class="inputVideo">上传视频</div>
  </label>
 </div>
 <div class="title">现场音频频</div>
 <div class="upLoad">
  <label for="pop_audio" id="labelr">
  <audio id="audioId" controls width="100%"></audio>
  <input style="display:none;" id="pop_audio" type="file" accept="audio/*" capture="camcorder" v-on:change="getAudio(event, '2')" name="fileTrans" ref="file" value="">
  <div class="inputAudio">上传音频</div>
  </label>
</div>

js部分

getVideo (ev, typer) {
  let taht = this
  //获取上传文件标签
  let filesId = document.getElementById('pop_video');
  //获取音频标签
  let videoId = document.getElementById('videoId')
  //把当前files[0]传给getFileURL方法, getFileURL方法对其做一处理
  let url = this.getFileURL(filesId.files[0])
  if (url) {
  //给video标签设置src
  videoId.src = url
  }
  let formData = new FormData();
  formData.append("file", filesId.files[0]);
  upload(this.token, formData).then(res => {
  console.log(res)
  if (res.data.code === 0) {
   this.videoURL = res.data.data.url
  }
  })
  console.log(url)
 },
 getAudio (ev, typer) {
  let taht = this
  //获取上传文件标签
  let filesId = document.getElementById('pop_audio');
  //获取音频标签
  let audioId = document.getElementById('audioId')
  //把当前files[0]传给getFileURL方法, getFileURL方法对其做一处理
  let url = this.getFileURL(filesId.files[0])
  if (url) {
  //给video标签设置src
  audioId.src = url
  }
  let formData = new FormData();
  formData.append("file", filesId.files[0]);
  upload(this.token, formData).then(res => {
  console.log(res)
  if (res.data.code === 0) {
   this.audioURL = res.data.data.url
  }
  })
  console.log(url)
 },
 getFileURL (file) {
  let getUrl = null
  if (window.createObjectURL != undefined) {
  //basic
  getUrl = window.createObjectURL(file)
  } else if (window.URL != undefined) {//window.URL 标准定义
  //mozilla(firefox)
  //获取一个http格式的url路径,这个时候就可以设置<img>中的显示
  getUrl = window.URL.createObjectURL(file)
  } else if (window.webkitURL != undefined) {//window.webkitURL是webkit的内核
  //webkit or chrome
  getUrl = window.webkitURL.createObjectURL(file)
  }
  return getUrl 

  //video 标签的 duration属性,获取当前视频的长度
  // let duration = videoId.duration
  // if (Math.floor(duration) > 60) {
  // that.layer.msg('视频不能大于60秒')
  // } 
 },

css部分

#inspect .upLoad {
 background-color:#fff;
 /* height: 1.5rem; */
 text-align: left;
 padding: 0.3rem;
}

#inspect .inputVideo {
 background-color: #00cc66;
 color: #fff;
 font-size: 0.32rem;
 width: 30%;
 height: 0.8rem;
 line-height: 0.8rem;
 border-radius: 0.4rem;
 text-align: center;
 margin: 0 auto; 
}

#inspect .inputAudio {
 background-color: #5cadff;
 color: #fff;
 font-size: 0.32rem;
 width: 30%;
 height: 0.8rem;
 line-height: 0.8rem;
 border-radius: 0.4rem;
 text-align: center;
 margin: 0 auto; 
}

效果图

vue实现移动端input上传视频、音频

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 #Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 #Javascript
js实现简单扫雷
Nov 27 #Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 #Javascript
javascript实现扫雷简易版
Aug 18 #Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 #Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 #Javascript
You might like
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
javascript每日必学之封装
2016/02/23 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python基础入门之seed()方法的使用
2015/05/15 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
高中生自我评语大全
2014/01/19 职场文书
四年级科学教学反思
2014/02/10 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL