vue實現移動端input上傳視訊、音訊
阿新 • • 發佈:2020-08-19
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",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.js元件的教程,請大家點選專題vue.js元件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰教程》
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。