运用el-upload结实现腾讯云点播视频上传

1. 安装腾讯云点播 SDK

首先需要安装腾讯云点播 SDK，可以通过 npm 安装：

npm install vod-node-sdk --save

2. 引入 el-upload 组件

在项目中引入 el-upload 组件：

import { ElUpload } from 'element-plus'

3. 初始化腾讯云点播 SDK

在使用腾讯云点播 SDK 之前，需要先初始化：

import Vod from 'vod-node-sdk'

const vod = new Vod({
  SecretId: 'yourSecretId',
  SecretKey: 'yourSecretKey',
})

4. 配置 el-upload

el-upload 组件有很多配置项，我们需要将其中一些配置项设置为腾讯云点播需要的参数。

<template>
  <el-upload
    :action="uploadUrl"
    :headers="headers"
    :on-success="onSuccess"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">点击上传视频</el-button>
  </el-upload>
</template>

<script>
import { ElUpload } from 'element-plus'
import Vod from 'vod-node-sdk'

export default {
  components: {
    ElUpload,
  },
  data() {
    return {
      vod: null,
      uploadUrl: '',
      headers: {},
    }
  },
  created() {
    // 初始化腾讯云点播 SDK
    this.vod = new Vod({
      SecretId: 'yourSecretId',
      SecretKey: 'yourSecretKey',
    })

    // 获取上传 URL 和上传鉴权参数
    this.vod.getUploadSignature({
      fileType: 'video',
      fileName: 'test.mp4',
    }).then(({ uploadUrl, headers }) => {
      this.uploadUrl = uploadUrl
      this.headers = headers
    })
  },
  methods: {
    // 上传成功回调函数
    onSuccess(response, file, fileList) {
      console.log(response)
    },
    // 上传前的回调函数，用来设置上传参数
    beforeUpload(file) {
      const { headers } = this
      headers['X-Session-Token'] = file.token
      headers['Content-Type'] = file.type
      return true
    },
  },
}
</script>

5. 总结

通过以上步骤，我们就可以使用 el-upload 组件结合腾讯云点播 SDK 完成视频上传了。其中需要注意的是，上传文件的文件名需要和获取上传 URL 时传入的文件名一致，否则会上传失败。