vue文件上传功能,vue视频上传组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现视频上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现视频上传功能的具体代码，供大家参考，具体内容如下
环境：单位上传视频上传到阿里云
主要处理前端在某视频剪辑软件下上传视频
使用的是阿里云的视频点播服务
1、需要后台去申请一个开发API，请求阿里云的接口访问控制
2、有了开发视频的令牌，供给前端
3、前端去请求阿里云存储
视频。某视频剪辑软件
模板
div class=容器
电子贺卡
div slot=header
差异课程：/div
差异阶段：/div
差异课时：/div
/div
埃尔表单标签-宽度=40px
El-表单-项目标签=视频
投入
ref=视频文件
type=file
/El-表单-项目
El-表单-项目标签=封面
投入
ref=图像文件
type=file
/
/El-表单-项目
埃尔-表单-项目
埃尔按钮
type=primary
@click=authUpload
开始上传/el-button
埃尔按钮返回/el-button
/El-表单-项目
/el格式
/电子名片
/div
/模板
脚本
/* eslint-disable */
从" axios "导入爱可信
导入{
aliyunImagUploadAddressAdnAuth，
aliyunVideoUploadAddressAdnAuth，
传输视频，
getAliyunTransCodePercent
}来自"@/服务/阿里云-战略情报局"
导出默认值{
data () {
返回{
上传者：空，
视频Id:空，
imageUrl:" "，
文件名：""
}
},
已创建(){
this.initUploader()
},
方法：{
authUpload () {
const videoFile=this .$refs[video-file].文件[0]
这个。上传者。addfile(视频文件，null，null，null， {Vod:{}} )
this.uploader.addFile(this .$refs[image-file].文件[0],空，空，空， {Vod:{}} )
this.fileName=视频文件。名称
this.uploader.startUpload()
},
initUploader () {
this.uploader=新窗口AliyunUpload。视频点播({
//阿里账号ID，必须有值，值的来源https://help.aliyun.com/knowledge_detail/37196.html
用户Id: 1618139964448548，
//上传到点播的地域，默认值为中国-上海,//欧盟-中部-1,美联社-东南部-1
地区：“cn-上海",
//分片大小默认1M，不能小于100K
零件号：1048576,
//并行上传分片个数，默认5
平行：5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3，
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2，
//开始上传
onUploadstarted:异步上传信息={
console.log(onUploadstarted ，uploadInfo)
让uploadAuthInfo=null
if (uploadInfo.isImage) {
const { data }=await aliyunimaguploadaddressandauth()
这个。imageurl=数据。数据。地址
uploadAuthInfo=data.data
}否则{
const { data }=await aliyunvideuploadaddressadnauth({
文件名：uploadInfo.file.name
})
this.videoId=data.data.videoId
uploadAuthInfo=data.data
}
//console.log(uploadAuthInfo ，uploadAuthInfo)
这个。上传者。setuploadauthandaddress(
上传信息，
uploadAuthInfo.uploadAuth，
uploadAuthInfo.uploadAddress，
uploadauthinfo。videoid uploadauthinfo。图片的编号
)
},
//文件上传成功
onUploadSucceed:函数(上传信息){
console.log(onUploadSucceed ，uploadInfo)
},
//文件上传失败
onUploadFailed:函数（上传信息，代码，消息){
console.log(onUploadFailed )
},
//文件上传进度，单位：字节
onuploadpress:函数(上传信息、总大小、加载百分比){
},
//上传凭证超时
onUploadTokenExpired:函数(上传信息){
控制台。日志( onUploadTokenExpired )
},
//全部文件上传结束
onUploadEnd:异步上传信息={
console.log(上传信息)
console.log({
莱索尼德：这个. route.query.lessonId，
fileId: this.videoId，
coverImageUrl: this.imageUrl，
文件名：this.fileName
})
const { data }=await trans devideo({
莱索尼德：这个. route.query.lessonId，
fileId: this.videoId，
coverImageUrl: this.imageUrl，
文件名：this.fileName
})
console.log(数据)
setInterval(async ()={
const { data }=await getalyuntranscodepercent(this .$route.query.lessonId)
console.log(转码进度，数据)
}, 3000)
}
})
}
}
}
/脚本
阿里云oss.ts，存放接口
/**
* 阿里云上传
*/
从" @/实用工具/请求"导入请求
export const aliyunimaguploadaddressdauth=()={
退货请求({
方法：“得到”，
网址：/boss/course/upload/aliyunimaguploadaddressandauth。JSON
})
}
export const aliyunvideuploadaddressadnauth=(params:any)={
退货请求({
方法：“得到”，
网址：/boss/course/upload/aliyunvideuploadaddressadnauth。 JSON ，
参数
})
}
export const trans devideo=(data:any)={
退货请求({
方法： POST ，
网址：/boss/课程/上传/阿里云转码。 JSON ，
数据
})
}
export const getalytuntranscodepercent=(lessonId:string number)={
退货请求({
方法：“得到”，
网址：/boss/course/upload/aliyuntranscodepercent。 JSON ，
参数：{
课程身份
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。