您好,登錄后才能下訂單哦!
vue實現移動端input上傳視頻、音頻的方法是什么?這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热?,讓我們一起來看看吧?/p>
vue移動端input上傳視頻、音頻,供大家參考,具體內容如下
html部分
<div class="title">現場視頻</div> <div class="upLoad"> <label for="pop_video" id="labelr"> <video id="videoId" controls width="100%"></video> <input 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 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上傳視頻、音頻的方法是什么大概了解了嗎?希望文章內容對大家有所幫助。如果想了解更多相關文章內容,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。