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>

标签：index,vue,const,威视,param,videoUpload,上传,event
来源： https://blog.csdn.net/weixin_50478878/article/details/122091606