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

87 浏览量更新于2023-05-11 评论收藏 53KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴

趣的小伙伴们可以参考一下

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

html部分

</label>

</div>

<div class="title">现场音频频</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)

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38744207

粉丝: 343
资源: 2万+

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

vue中添加mp3音频文件的方法

vue录音demo

vue实现PC端录音功能的实例代码

vue实现移动端观看监控

基于vue实现移动端小米应用商城页面

vue3 移动端富文本上传视频

vue实现移动端多级下拉菜单

vue实现移动端table

使用vue实现移动端回到顶部的组件

vue3移动端开源项目

vue3移动端横向滑动日历

vue的移动端UI框架

vue 实现移动端语音播放样式

vue开发移动端页面

vue 商城 移动端源码

vue开发移动端app

vue项目移动端编写项目职责

vue3移动端开发项目经验

vue3 移动端颜色选择器

vue2移动端下滑切换页面

会员权益专享

最新资源

vue 商城移动端源码