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 相关文章推荐
Jquery 实现grid绑定模板
Jan 28 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 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
实用函数3
2007/11/08 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
yii上传文件或图片实例
2014/04/01 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
python实现web方式logview的方法
2015/08/10 Python
Python处理Excel文件实例代码
2017/06/20 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
新大陆软件面试题
2016/11/24 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
大学军训感言800字
2014/02/27 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书