vue实现上传视频

2026-03-09 03:25:14VUE

上传视频的基本实现

使用Vue实现视频上传功能需要结合HTML5的<input type="file">元素和FormData对象。以下是一个基础的实现方法：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileChange" />
    <button @click="uploadVideo">上传视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
    },
    uploadVideo() {
      if (!this.selectedFile) return

      const formData = new FormData()
      formData.append('video', this.selectedFile)

      fetch('your-upload-api-endpoint', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('上传成功:', data)
      })
      .catch(error => {
        console.error('上传失败:', error)
      })
    }
  }
}
</script>

添加进度显示

上传大视频文件时，显示上传进度可以提升用户体验。可以使用XMLHttpRequest的progress事件：

vue实现上传视频

uploadVideo() {
  if (!this.selectedFile) return

  const formData = new FormData()
  formData.append('video', this.selectedFile)

  const xhr = new XMLHttpRequest()
  xhr.open('POST', 'your-upload-api-endpoint', true)

  xhr.upload.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100)
      console.log(`上传进度: ${percentComplete}%`)
    }
  }

  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('上传成功:', xhr.responseText)
    } else {
      console.error('上传失败:', xhr.statusText)
    }
  }

  xhr.send(formData)
}

文件大小限制

在上传前检查视频文件大小：

handleFileChange(event) {
  const file = event.target.files[0]
  const maxSize = 100 * 1024 * 1024 // 100MB

  if (file.size > maxSize) {
    alert('视频文件不能超过100MB')
    event.target.value = '' // 清除选择
    return
  }

  this.selectedFile = file
}

使用第三方库

对于更复杂的需求，可以考虑使用第三方上传库如vue-upload-component或axios：

vue实现上传视频

// 使用axios示例
import axios from 'axios'

uploadVideo() {
  const formData = new FormData()
  formData.append('video', this.selectedFile)

  axios.post('your-upload-api-endpoint', formData, {
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(`上传进度: ${percentCompleted}%`)
    }
  })
  .then(response => {
    console.log('上传成功:', response.data)
  })
  .catch(error => {
    console.error('上传失败:', error)
  })
}

预览上传的视频

在提交前预览选择的视频文件：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileChange" />
    <video v-if="videoUrl" :src="videoUrl" controls width="400"></video>
    <button @click="uploadVideo">上传视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      videoUrl: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      this.selectedFile = file
      this.videoUrl = URL.createObjectURL(file)
    },
    // ...其他方法
  }
}
</script>

服务器端处理

确保服务器端API能够正确处理视频文件上传。例如Node.js Express服务器可以这样处理：

const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/upload-video', upload.single('video'), (req, res) => {
  // req.file包含上传的文件信息
  res.json({ message: '视频上传成功', file: req.file })
})

以上方法提供了从基础到进阶的视频上传实现方案，可以根据具体需求选择合适的实现方式。