电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue實(shí)現(xiàn)視頻上傳功能

瀏覽:30日期:2022-09-30 13:32:22

本文實(shí)例為大家分享了vue實(shí)現(xiàn)視頻上傳功能的具體代碼,供大家參考,具體內(nèi)容如下

環(huán)境:vue + TS 上傳視頻 + 上傳到阿里云主要處理前端在vue下上傳視頻

使用的是阿里云的視頻點(diǎn)播服務(wù)

1、需要后臺去申請一個開發(fā)API,請求阿里云的接口訪問控制2、有了開發(fā)視頻的token,供給前端3、前端去請求阿里云存儲

vue實(shí)現(xiàn)視頻上傳功能

video.vue

<template> <div class='container'> <el-card> <div slot='header'><div>課程:</div><div>階段:</div><div>課時:</div> </div> <el-form label-width='40px'><el-form-item label='視頻'> <input ref='video-file' type='file' ></el-form-item><el-form-item label='封面'> <input ref='image-file' type='file' /></el-form-item><el-form-item> <el-button type='primary' @click='authUpload' >開始上傳</el-button> <el-button>返回</el-button></el-form-item> </el-form> </el-card> </div></template><script>/* eslint-disable */import axios from ’axios’import { aliyunImagUploadAddressAdnAuth, aliyunVideoUploadAddressAdnAuth, transCodeVideo, getAliyunTransCodePercent} from ’@/services/aliyun-oss’export default { data () { return { uploader: null, videoId: null, imageUrl: ’’, fileName: ’’ } }, created () { this.initUploader() }, methods: { authUpload () { const videoFile = this.$refs[’video-file’].files[0] this.uploader.addFile(videoFile, null, null, null, ’{'Vod':{}}’) this.uploader.addFile(this.$refs[’image-file’].files[0], null, null, null, ’{'Vod':{}}’) this.fileName = videoFile.name this.uploader.startUpload() }, initUploader () { this.uploader = new window.AliyunUpload.Vod({// 阿里賬號ID,必須有值 ,值的來源https://help.aliyun.com/knowledge_detail/37196.htmluserId: 1618139964448548,// 上傳到點(diǎn)播的地域, 默認(rèn)值為’cn-shanghai’,//eu-central-1,ap-southeast-1region: ’cn-shanghai’,// 分片大小默認(rèn)1M,不能小于100KpartSize: 1048576,// 并行上傳分片個數(shù),默認(rèn)5parallel: 5,// 網(wǎng)絡(luò)原因失敗時,重新上傳次數(shù),默認(rèn)為3retryCount: 3,// 網(wǎng)絡(luò)原因失敗時,重新上傳間隔時間,默認(rèn)為2秒retryDuration: 2,// 開始上傳onUploadstarted: async uploadInfo => { console.log(’onUploadstarted’, uploadInfo) let uploadAuthInfo = null if (uploadInfo.isImage) { const { data } = await aliyunImagUploadAddressAdnAuth() this.imageUrl = data.data.imageURL uploadAuthInfo = data.data } else { const { data } = await aliyunVideoUploadAddressAdnAuth({ fileName: uploadInfo.file.name }) this.videoId = data.data.videoId uploadAuthInfo = data.data } // console.log(’uploadAuthInfo’, uploadAuthInfo) this.uploader.setUploadAuthAndAddress( uploadInfo, uploadAuthInfo.uploadAuth, uploadAuthInfo.uploadAddress, uploadAuthInfo.videoId || uploadAuthInfo.imageId )},// 文件上傳成功onUploadSucceed: function (uploadInfo) { console.log(’onUploadSucceed’, uploadInfo)},// 文件上傳失敗onUploadFailed: function (uploadInfo, code, message) { console.log(’onUploadFailed’)},// 文件上傳進(jìn)度,單位:字節(jié)onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},// 上傳憑證超時onUploadTokenExpired: function (uploadInfo) { console.log(’onUploadTokenExpired’)},// 全部文件上傳結(jié)束onUploadEnd: async uploadInfo => { console.log(uploadInfo) console.log({ lessonId: this.$route.query.lessonId, fileId: this.videoId, coverImageUrl: this.imageUrl, fileName: this.fileName }) const { data } = await transCodeVideo({ lessonId: this.$route.query.lessonId, fileId: this.videoId, coverImageUrl: this.imageUrl, fileName: this.fileName }) console.log(data) setInterval(async () => { const { data } = await getAliyunTransCodePercent(this.$route.query.lessonId) console.log(’轉(zhuǎn)碼進(jìn)度’, data) }, 3000)} }) } }}</script>

aliyun-oss.ts ,存放接口

/** * 阿里云上傳 */import request from ’@/utils/request’export const aliyunImagUploadAddressAdnAuth = () => { return request({ method: ’GET’, url: ’/boss/course/upload/aliyunImagUploadAddressAdnAuth.json’ })}export const aliyunVideoUploadAddressAdnAuth = (params: any) => { return request({ method: ’GET’, url: ’/boss/course/upload/aliyunVideoUploadAddressAdnAuth.json’, params })}export const transCodeVideo = (data: any) => { return request({ method: ’POST’, url: ’/boss/course/upload/aliyunTransCode.json’, data })}export const getAliyunTransCodePercent = (lessonId: string | number) => { return request({ method: ’GET’, url: ’/boss/course/upload/aliyunTransCodePercent.json’, params: { lessonId } })}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 超声波清洗机_大型超声波清洗机_工业超声波清洗设备-洁盟清洗设备 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 贝朗斯动力商城(BRCPOWER.COM) - 买叉车蓄电池上贝朗斯商城,价格更超值,品质有保障! | 防爆电机-高压防爆电机-ybx4电动机厂家-河南省南洋防爆电机有限公司 | 网站建设-网站制作-网站设计-网站开发定制公司-网站SEO优化推广-咏熠软件 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | 高压互感器,电流互感器,电压互感器-上海鄂互电气科技有限公司 | 无线讲解器-导游讲解器-自助讲解器-分区讲解系统 品牌生产厂家[鹰米讲解-合肥市徽马信息科技有限公司] | 北京银联移动POS机办理_收银POS机_智能pos机_刷卡机_收银系统_个人POS机-谷骐科技【官网】 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 海峰资讯 - 专注装饰公司营销型网站建设和网络营销培训 | 板框压滤机-隔膜压滤机-厢式压滤机生产厂家-禹州市君工机械设备有限公司 | 高扬程排污泵_隔膜泵_磁力泵_节能自吸离心水泵厂家-【上海博洋】 | 临海涌泉蜜桔官网|涌泉蜜桔微商批发代理|涌泉蜜桔供应链|涌泉蜜桔一件代发 | 全自动面膜机_面膜折叠机价格_面膜灌装机定制_高速折棉机厂家-深圳市益豪科技有限公司 | 丁基胶边来料加工,医用活塞边角料加工,异戊二烯橡胶边来料加工-河北盛唐橡胶制品有限公司 | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 高效复合碳源-多核碳源生产厂家-污水处理反硝化菌种一长隆科技库巴鲁 | 氟塑料磁力泵-不锈钢离心泵-耐腐蚀化工泵厂家「皖金泵阀」 | 120kv/2mA直流高压发生器-60kv/2mA-30kva/50kv工频耐压试验装置-旭明电工 | 亚克力制品定制,上海嘉定有机玻璃加工制作生产厂家—官网 | 工业车间焊接-整体|集中除尘设备-激光|等离子切割机配套除尘-粉尘烟尘净化治理厂家-山东美蓝环保科技有限公司 | 酒水灌装机-白酒灌装机-酒精果酒酱油醋灌装设备_青州惠联灌装机械 | 洁净棚-洁净工作棚-无菌室-净化工程公司_北京卫护科技有限公司 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 南京泽朗生物科技有限公司-液体饮料代加工_果汁饮料代加工_固体饮料代加工 | 清水-铝合金-建筑模板厂家-木模板价格-铝模板生产「五棵松」品牌 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 防爆正压柜厂家_防爆配电箱_防爆控制箱_防爆空调_-盛通防爆 | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 超声骨密度仪-骨密度检测仪-经颅多普勒-tcd仪_南京科进实业有限公司 | 附着力促进剂-尼龙处理剂-PP处理剂-金属附着力处理剂-东莞市炅盛塑胶科技有限公司 | 压砖机_电动螺旋压力机_粉末成型压力机_郑州华隆机械tel_0371-60121717 | 公交驾校-北京公交驾校欢迎您! 工作心得_读书心得_学习心得_找心得体会范文就上学道文库 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 |