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

input

160 浏览量更新于2023-05-03 评论收藏 50KB PDF 举报

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

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

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

html部分

<input style="display:none;" id="pop_video" type="file" accept="video/*" capture="camcorder" v-on:change="getVideo(event, '2')" name="fileTrans"

ref="file" value="">

</label>

</div>

<div class="title">现场音频频</div>

<input style="display:none;" id="pop_audio" type="file" accept="audio/*" capture="camcorder" v-on:change="getAudio(event, '2')" name="fileTrans"

ref="file" value="">

</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 标准定义

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

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

weixin_38690089

粉丝: 5
资源: 925

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

HTML5视频上传（包含html5自带拍照，录像，音频，附件）

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

vue之封装自己的树组件视频

vue实现移动端观看监控

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

vue3 移动端富文本上传视频

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

vue实现移动端table

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

vue3移动端开源项目

vue3移动端横向滑动日历

vue的移动端UI框架

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

vue开发移动端页面

vue 商城 移动端源码

vue开发移动端app

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

vue3移动端开发项目经验

vue3 移动端颜色选择器

vue2移动端下滑切换页面

会员权益专享

最新资源

vue 商城移动端源码