vue3上传视频的方法

开头解决方案

在Vue 3项目中实现视频上传功能，通常会使用HTML5的<input type="file">元素来选择文件，并结合Axios等HTTP库将文件发送到服务器。为了确保良好的用户体验，我们还需要考虑文件大小限制、格式验证以及进度显示等功能。

接下来我将几种常见的Vue 3视频上传实现方式。

一、基础版：使用原生表单

这是最简单的实现方式，适合快速搭建原型。
```vue

import { ref } from 'vue'
import axios from 'axios'

// 存储选中的文件
const file = ref(null)

// 当用户选择文件时触发
function handleFileChange(e) {
file.value = e.target.files[0]
}

// 上传视频
async function uploadVideo() {
if (!file.value) return alert('请选择一个文件')

const formData = new FormData()
formData.append('video', file.value)

try {
const res = await axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
console.log('上传成功:', res.data)
} catch (err) {
console.error('上传失败:', err)
}
}

</p>

<h2>二、增强版：添加进度条与格式验证</h2>

<p>这个版本增加了文件类型检查和上传进度显示，提供了更好的用户体验。
```vue

  <div>
    
    
    <span>{{ progress }}%</span>
    <button>上传</button>
  </div>
</p>


import { ref, computed } from 'vue'
import axios from 'axios'

const file = ref(null)
const acceptedTypes = ['video/mp4', 'video/quicktime'] // 支持的视频格式
const progress = ref(0)

// 是否符合要求
const isValid = computed(() => {
  if (!file.value) return false
  // 检查文件类型是否合法
  return acceptedTypes.includes(file.value.type)
})

function handleFileChange(e) {
  file.value = e.target.files[0]
}

async function uploadVideo() {
  if (!isValid.value) return alert('请选择有效的视频文件')

  const formData = new FormData()
  formData.append('video', file.value)

  try {
    await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: (progressEvent) => {
        // 计算并更新进度
        progress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      }
    })
  } catch (err) {
    console.error('上传失败:', err)
  }
}


<p>