1.0.0 • Published 1 year ago
@liuyunxi/upload-vod v1.0.0
腾讯云点播上传
限制上传数量 限制上传格式 限制上传大小 显示上传进度 断点续传
代码演示
<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:[]}) |
1.0.0
1 year ago