vue 獲取視頻時(shí)長的實(shí)例代碼
直接通過element-ui
自帶的上傳組件結(jié)合js即可,代碼如下:
HTML:
<el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <button class="ce-button not-hover primary"> <i class="ce-icon_upload"></i> <span>重新上傳</span> </button> </el-upload>
js:
beforeAvatarUpload(file) { var fileName = file.name || '' var ext = fileName.split('.')[fileName.split('.').length - 1] if (ext !== "doc" && ext !== "docx" && ext !== "xls" && ext !== "xlsx" && ext !== "ppt" && ext !== "pptx" && ext !== "pdf" && ext !== "mp4") { this.$notify({ title: "失敗", message: "上傳資源只能是 doc/docx/xls/xlsx/ppt/pptx/pdf/mp4 格式!", type: "error", duration: 3000 }); return false } // ppt(10MB),word(10MB),excel(5MB) if (ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx") { debugger if (parseInt(file.size) > parseInt('10485760')) { this.$notify({ title: "失敗", message: "上傳word、ppt文件上限為10MB!", type: "error", duration: 3000 }); return false } } if (ext == 'mp4') { // 獲取視頻時(shí)長 var url = URL.createObjectURL(file); var audioElement = new Audio(url); var duration; audioElement.addEventListener("loadedmetadata", function (_event) { duration = audioElement.duration; //時(shí)長為秒,小數(shù),182.36 this.$parent.$data.wDuration = parseInt(duration) console.log(duration); }); } this.$parent.$data.wFileName = file.name this.$parent.$data.wSize = parseFloat(file.size / 1024).toFixed(2) //獲取文件大小 }
總結(jié)
以上所述是小編給大家介紹的vue 獲取視頻時(shí)長的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
vue項(xiàng)目中使用ts(typescript)入門教程
最近項(xiàng)目需要將原vue項(xiàng)目結(jié)合ts的使用進(jìn)行改造,本文從安裝到vue組件編寫進(jìn)行了說明,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11探秘Vue異步更新機(jī)制中nextTick的原理與實(shí)現(xiàn)
nextTick?是?Vue?提供的一個(gè)重要工具,它的作用主要體現(xiàn)在幫助我們更好地處理異步操作,下面就跟隨小編一起來探索一下nextTick的原理與實(shí)現(xiàn)吧2024-02-02Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新的方法示例
這篇文章主要介紹了Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01