vue上传录音_vue实现移动端input上传视频、音频
vue移动端input上传视频、音频,供大家参考,具体内容如下
html部分
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路径,这个时候就可以设置中的显示
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.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue上传录音_vue实现移动端input上传视频、音频相关推荐
- vue上传录音_vue用到H5+的录音功能 真机模拟的时候不能实现
vue用到H5+的录音功能 真机模拟的时候不能实现录音,报错plusready is not undefined 但是官方的demo中audio文件在真机模拟的时候是能够实现录音的. export d ...
- vue上传录音_vue中添加mp3音频文件的方法
有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一.将音频文件放置在static目录中,然后进行调用,如 ...
- antd vue表单上传文件_Vue编译出静态文件上传七牛CDN
Vue作为目前比较流行的前端开发框架,在前后端分离比较时尚的今天异常火热,下面分享下怎么把Vue编译出来的静态文件上传到CDN,在这里主要是七牛云的CDN. Vue项目进行编译 编译命令: npm r ...
- element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
- vue用户行为收集_vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" 2.监听keypress事件 (1)KeyDown.KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) ...
- vue真机调试_vue项目在自己手机上调试功能
一般vue项目在本地运行是localhost:8080/#/ 这个时候如果我们想在手机上调试 可以在vue项目config文件夹下的index.js里 把host后面的localhost改成你自己本地 ...
- vue 图片宫格_vue实现移动端九宫格布局
九宫格 *{ margin: 0px; padding: 0px; } .sudoku_row{ display: flex; align-items: center; width:100%; fle ...
- Vue使用微信录音并上传服务端
在微信公众号或者微信h5的网页开发中,会用到录音等功能,在微信里面使用微信录音会比较好一点,不用去设置ios和android的h5录音兼容性,并且h5的其他录音js文件可能不兼容微信浏览器等,所以vu ...
- vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正 下方代码 # 需要自行去掉 个人只作为着色效果加上 compres ...
最新文章
- 字节跳动学习笔记:java多线程实现原理
- 2017年10月08日普及组 蜡烛
- 处理字符串_11_判断一个字符是否是数字
- java web图片显示到浏览器
- java 减少内存_java中减少内存占用小技巧
- 广义动量定理之速度V的应用分析
- 作业要求 20180925-1 每周例行报告
- Spring Boot加载指定属性文件
- Oracle Decode函数详解
- JS基础知识 --变量类型和计算
- 3dmax 渲染关机 脚本_3DMax渲染完自动关机设置
- File类的基本操作方法
- 潘多拉路由器php,Padavan潘多拉固件ap模式openwrt固件应该如何设置有线AP模式
- sql:删除重复数据并且只保留id最小的一条
- linux下安装fortran90教程,linux 安装fortran 90
- 海康威视相机 RTSP 传输延迟解决方案
- tar 压缩文件夹到指定的目录
- Java开发四年,分享我收藏的网站和资源(不看亏一亿)
- 网络空间安全省赛A解析
- 【对比分析】vipkid和51talk哪个好?说说我的亲身经历!