腾讯云点播上传

限制上传数量 限制上传格式 限制上传大小 显示上传进度 断点续传

代码演示

<template>
  <AButton @click="ok" style="margin-bottom: 10px">打印文件上传结果</AButton>
  <YxVodUpload
      v-model:value="fileList"
      :signature="signature"
      rootUrl="http://127.0.0.1:8080"
      :headers="getHeaders"
      :max="5"
      :size="50000"
  ></YxVodUpload>
</template>

<script setup lang="ts">
/**
 * 视频: .mp4,.avi,.mpeg
 */
import { ref } from 'vue'
const signature = 'http://localhost:8010/file/v1/tx/vod/signature'
const fileList = ref([
  {
    fileId: '243791577886541835',
    name: 'xx视频',
    url: '//1500017108.vod2.myqcloud.com/6cad6439vodcq1500017108/260d7322243791577886541835/Wk1OT4igLfMA.mp4',
  },
])
const ok = () => {
  console.log(fileList.value)
  console.log(JSON.stringify(fileList.value))
}
/**
 * 获取请求头
 */
const getHeaders = () => {
  return {
    'Cache-Id':
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7ImZyZXNoVGltZSI6MTY4MjE1NDUxNCwiaW5mbyI6IntcImF2YXRhclwiOlwie1xcXCJ1cmxcXFwiOiBudWxsLCBcXFwibmFtZVxcXCI6IFxcXCJjcm9wcGVkLTE2NzYzMzkzNzM3MTcucG5nXFxcIiwgXFxcInBhdGhcXFwiOiBcXFwiXFxcXFxcXFxkZXZcXFxcXFxcXDIwMjMwMjE0XFxcXFxcXFxhYjhhMjI5ZjM3YmQ0MmUzODg0YjhiNmVlMTI5ZmNkYy5wbmdcXFwiLCBcXFwic2l6ZVxcXCI6IG51bGwsIFxcXCJzdWZmaXhcXFwiOiBcXFwicG5nXFxcIn1cIixcImVtYWlsXCI6XCJcIixcImlkXCI6XCIyOGMxMTQ2NC0zZTY3LTRhNGEtYjI1MC04YzQyMjZhNzAxNDhcIixcImxvZ2luSXBcIjpcIjE5Mi4xNjguMzEuMTg4XCIsXCJsb2dpbk5hbWVcIjpcImFkbWluXCIsXCJsb2dpblRpbWVTdHJcIjpcIjIwMjMtMDQtMTkgMTY6NThcIixcInBob25lTnVtYmVyXCI6XCIxNzMzNTc3ODY4NVwiLFwicm9sZXNcIjpbXCLnrqHnkIblkZhcIl0sXCJzZXhcIjpcIlwiLFwidGVuYW50SWRcIjpcImZhMzY5ZTE5LTI2NDgtNGNkYy1hOGUzLWQwMDEyODgwMmRlYVwiLFwidXNlck5hbWVcIjpcIuW5s-WPsOWFrOWPuOi2heeuoVwifSJ9LCJleHAiOjE2ODIwNzE3MTR9.fv_VHuCy3aQ0MFdsiS3X3aHmOcI8qeRmSQN8ezt-AxE',
  }
}
setTimeout(() => {
  fileList.value = [
    {
      fileId: '243791577886541835',
      name: 'xx视频',
      url: '//1500017108.vod2.myqcloud.com/6cad6439vodcq1500017108/260d7322243791577886541835/Wk1OT4igLfMA.mp4',
    },
  ]
}, 1000)
</script>

<style scoped lang="less"></style>

API

参数

| 参数 | 说明 | 类型 | 默认值 | |---------------|----------------|:--------:|------| | v-model:value | 绑定数据 | Array | [] | | action | 上传地址 | string | | | rootUrl | 文件访问跟地址 | string | | | headers | 请求头 | Function | | | accept | 允许格式（详见demo） | string | | | max | 最大数量限制 | number | 5 | | size | 最大大小限制 单位M | number | 200 | | showUpload | 是否显示上传按钮 | boolean | true | | showDelete | 是否显示删除按钮 | boolean | true |

事件

| 事件名称 | 说明 | 回调参数 | |--------|------|-------------------| | change | fileList | function({fileList:[]}) |