vue 上传视频到保利威视

//引入 保利威视 依赖
npm i @polyv/vod-upload-js-sdk
// 保利威直传插件
npm i js-md5
// 你必须的md5加密

创建js方法
import PlvVideoUpload from '@polyv/vod-upload-js-sdk'
import md5 from 'js-md5'
// 此方法主要用于加密一些保利威的专用参数 如果是后端传递的 可以打掉
function getToken(videoUpload) {
const ptime = Date.now()
const userid = ''
const secretkey = ''
const writeToken = ''
const hash = md5(ptime + writeToken)
const sign = md5(secretkey + ptime)
videoUpload.updateUserData({ ptime, hash, sign, userid })
}
// 由于保利威的一些机制 你需要三分钟就重新加密你的 ptime 如果你打掉了就不行
function autoUpdateUserData(timer, videoUpload) {
getToken(videoUpload)
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
autoUpdateUserData(timer, videoUpload)
}, 3 * 50 * 1000)
}
/**
* @Date: 2021/3/26
* @param: files -> 一个文件的数组 注意 是【数组】
* @param: fileSetting -> 主要是用来传递给保利威的属性
* @param: callback -> 上传进度，成功，失败 的回调 tips：回调太多 我就拿了这三个比较有用的
*/
export function uploadFile(files, fileSetting, callback) {
const videoUpload = new PlvVideoUpload()
autoUpdateUserData(null, videoUpload)
Array.from(files).forEach((file, index) => {
const uploader = videoUpload.addFile(file, {
// 上传视频进度的回调
FileProgress: ({ progress }) => {
const progressSize = (progress * 100).toFixed(2)
callback(index, progressSize)
},
// 上传视频成功的回调
FileSucceed: ({ fileData }) => {
callback(index, fileData)
},
// 上传视频失败的回调
onFileFailed: ({ errData }) => {
callback(index, errData)
}
}, fileSetting)
})
/**
* 这里的调用是上传全部
* 本来我也是一个一个调的
* 但是考虑到对于有多选上传的童鞋不是很友好
* 就无论你传递几个视频 这里都统一一起上传
* */
videoUpload.startAll()
}

index.vue 写
<template>
<div>
<input
type="file"
ref="files"
multiple="multiple"
@change="handleFileAL"
>
</div>
</template>
<script>
import { uploadFile } from './uopladFile.js'
export default {
data() {
return {
fileSetting: {
desc: 'i am desc', // 描述
cataid: 1615514002553, // 分类ID 可以后端传递 也可以不写 或写死
tag: 'i am tag', // 标签
luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启
keepsource: 1 // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码
}
}
},
mounted() {},
methods: {
handleFileAL(event) {
if (!event.target.value) {
this.$message.error('请选择您要上传的文件')
return false
}
/**
* @Date: 2021/3/26
* @param: event.target.files -> 传递的文件list
* @param: this.fileSetting -> 常规配置 上面有备注
* @param: 回调
*/
uploadFile(event.target.files, this.fileSetting, (index, event) => {
console.log(index, event)
})
}
}
}
</script>

最后

以上就是冷酷小天鹅为你收集整理的vue 上传视频到保利威视的全部内容，希望文章能够帮你解决vue 上传视频到保利威视所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。