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

您的位置:首頁技術文章
文章詳情頁

vue實現視頻上傳功能

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

本文實例為大家分享了vue實現視頻上傳功能的具體代碼,供大家參考,具體內容如下

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

使用的是阿里云的視頻點播服務

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

vue實現視頻上傳功能

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,// 上傳到點播的地域, 默認值為’cn-shanghai’,//eu-central-1,ap-southeast-1region: ’cn-shanghai’,// 分片大小默認1M,不能小于100KpartSize: 1048576,// 并行上傳分片個數,默認5parallel: 5,// 網絡原因失敗時,重新上傳次數,默認為3retryCount: 3,// 網絡原因失敗時,重新上傳間隔時間,默認為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’)},// 文件上傳進度,單位:字節onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},// 上傳憑證超時onUploadTokenExpired: function (uploadInfo) { console.log(’onUploadTokenExpired’)},// 全部文件上傳結束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(’轉碼進度’, 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 } })}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 万濠投影仪_瑞士TRIMOS高度仪_尼康投影仪V12BDC|量子仪器 | 球磨机 选矿球磨机 棒磨机 浮选机 分级机 选矿设备厂家 | 次氯酸钠厂家,涉水级次氯酸钠,三氯化铁生产厂家-淄博吉灿化工 | 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 两头忙,井下装载机,伸缩臂装载机,30装载机/铲车,50装载机/铲车厂家_价格-莱州巨浪机械有限公司 | 同步带轮_同步带_同步轮_iHF合发齿轮厂家-深圳市合发齿轮机械有限公司 | 吹田功率计-长创耐压测试仪-深圳市新朗普电子科技有限公司 | 免费B2B信息推广发布平台 - 推发网 | 莱州网络公司|莱州网站建设|莱州网站优化|莱州阿里巴巴-莱州唯佳网络科技有限公司 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂 | 合肥卓创建筑装饰,专业办公室装饰、商业空间装修与设计。 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 液压扳手-高品质液压扳手供应商 - 液压扳手, 液压扳手供应商, 德国进口液压拉马 | 塑木弯曲试验机_铜带拉伸强度试验机_拉压力测试台-倾技百科 | 换链神器官网-友情链接交换、购买交易于一体的站长平台 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 结晶点测定仪-润滑脂滴点测定仪-大连煜烁 | 农产品溯源系统_农产品质量安全追溯系统_溯源系统 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 不锈钢水箱生产厂家_消防水箱生产厂家-河南联固供水设备有限公司 | 压力变送器-上海武锐自动化设备有限公司 | 微信小程序定制,广州app公众号商城网站开发公司-广东锋火 | 周口市风机厂,周鼓风机,河南省周口市风机厂 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 合肥地磅_合肥数控切割机_安徽地磅厂家_合肥世佳电工设备有限公司 | 制丸机,小型中药制丸机,全自动制丸机价格-甘肃恒跃制药设备有限公司 | nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 接地电阻测试仪[厂家直销]_电缆故障测试仪[精准定位]_耐压测试仪-武汉南电至诚电力设备 | YJLV22铝芯铠装电缆-MYPTJ矿用高压橡套电缆-天津市电缆总厂 | 棕刚玉-白刚玉厂家价格_巩义市东翔净水材料厂 | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 代写标书-专业代做标书-商业计划书代写「深圳卓越创兴公司」 | 上海三信|ph计|酸度计|电导率仪-艾科仪器 | 网站建设-临朐爱采购-抖音运营-山东兆通网络科技 | 【灵硕展览集团】展台展会设计_展览会展台搭建_展览展示设计一站式服务公司 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 |