cv-upload-video 视频上传 ¶

简要 ¶

视频上传扩展组件
优化了视频上传的体验

使用

// 注册 cv-pc-ui
Vue.use(cvPcUI, {
  // 可以在这里设置全局的 cvUploadVideo 属性
  'cvUploadVideo': {
    fileSize: 10
    upAction: 'https://jsonplaceholder.typicode.com/posts', // 上传地址
    data: { token: 'xxx' }, // 附带数据
    // 上传后对响应处理, 拼接为一个视频的地址
    handleResponse(response, file) {
      // 根据响应结果, 设置 URL
      return 'https://xxx.xxx.com/video/' + response.id
    }
  }
});

示例 ¶

::: demo

vue

<template>
  <div>
    <h1>上传组件 - 上传视频</h1>
    <cvUploadVideo v-model="formData.video_value" v-model:initValue="formData.video_cdn" />
    <h4>显示数据</h4>
    <pre style="margin-top: 20px; background: #f6f6f6; padding: 20px; clear: both">{{ formData }}</pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        video_value: 'business/9/video/202505/fbb00AgZbVANXAFRQA1I/202505031255316815a1c324dbe.mp4',
        video_cdn: 'https://f.10yun.com/business/9/video/202505/fbb00AgZbVANXAFRQA1I/202505031255316815a1c324dbe.mp4'
      }
    };
  },
  methods: {
    upResponseFn(response, file) {
      return file.url;
    }
  },
  mounted() {}
};
</script>

:::

属性 ¶

属性名	类型	默认值	说明
v-model/modelValue	String,Object,Array	-	文本内容
drag	Boolean	false	是否启用拖拽上传
multiple	Boolean	true	是否支持多选文件
limit	Number	-	最大允许上传个数 ,文件个数显示
beforeRemove	Function	-	删除前的操作
fileType	Array	-	文件类型, 例如['png','jpg','jpeg']
fileSize	Number	-	是否禁用
width	Number	360	显示宽度(px)
height	Number	-	显示高度(默认auto)

cv-upload-video 视频上传 ¶

简要 ¶

示例 ¶

属性 ¶

参考链接 ¶