vue3 上传视频显示在网页上 使用setpu语法糖

在Vue3中，如果你想实现在网页上展示上传的视频，可以使用Element UI或Ant Design Vue等UI库提供的`el-upload`或类似组件。`setup`语法糖是Vue3 Composition API的一部分，它提供了一种更简洁的方式来组织组件内部的状态和逻辑。

首先，你需要安装相关的依赖，例如`element-plus`库：

npm install element-plus @vue/cli-plugin-element-plus

然后，在`setup`函数中处理文件上传和显示的过程：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      accept="video/*"
      :on-change="(file) => handleFileChange(file)"
      :before-upload="beforeUpload"
      :limit="1" <!-- 可能需要限制最多上传一个文件 -->
    >
      <i class="el-icon-upload"></i> Click to upload
    </el-upload>
    <video v-if="videoUrl" controls :src="videoUrl" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const videoUrl = ref('');
const uploadUrl = 'your-api-url-for-video-uploads'; // 替换为实际的API URL

async function handleFileChange(file) {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post(uploadUrl, formData);
    videoUrl.value = response.data.url; // 假设响应数据包含新视频URL
  } catch (error) {
    console.error('Upload error:', error);
  }
}

function beforeUpload(file) {
  if (file.size > MAX_FILE_SIZE_IN_BYTES) {
    alert('File size exceeds the limit');
    return false;
  }
  return true;
}
</script>

在这个例子中，`handleFileChange`函数处理文件选择和上传，而`beforeUpload`则用于检查文件大小是否符合规定。当视频上传成功并返回新的URL时，视频会在`v-if`条件下显示出来。