当前位置：首页 > VUE

vue实现视频上传管理

2026-01-07 02:19:59VUE

Vue 视频上传管理实现方案

前端部分

安装依赖 需要安装 axios 用于网络请求，element-ui 或其他 UI 库提供上传组件（可选）

npm install axios element-ui

基础上传组件实现 使用 <input type="file"> 或 UI 库的上传组件

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="video/*">
    <button @click="uploadVideo">上传</button>
    <progress v-if="progress" :value="progress" max="100"></progress>
  </div>
</template>

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

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

      try {
        const response = await axios.post('/api/upload', formData, {
          onUploadProgress: progressEvent => {
            this.progress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
          }
        })
        console.log('上传成功', response.data)
      } catch (error) {
        console.error('上传失败', error)
      }
    }
  }
}
</script>

后端接口处理（Node.js示例）

Express 接收文件

const express = require('express')
const multer = require('multer')
const path = require('path')

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

app.post('/api/upload', upload.single('video'), (req, res) => {
  // 处理上传的视频文件
  const fileInfo = {
    originalName: req.file.originalname,
    savedPath: req.file.path,
    size: req.file.size,
    mimetype: req.file.mimetype
  }

  // 保存文件信息到数据库
  // ...

  res.json({ success: true, file: fileInfo })
})

app.listen(3000)

视频管理功能

视频列表展示

<template>
  <div>
    <div v-for="video in videos" :key="video.id">
      <video :src="video.url" controls width="300"></video>
      <p>{{ video.name }}</p>
      <button @click="deleteVideo(video.id)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: []
    }
  },
  async created() {
    await this.fetchVideos()
  },
  methods: {
    async fetchVideos() {
      const response = await axios.get('/api/videos')
      this.videos = response.data
    },
    async deleteVideo(id) {
      await axios.delete(`/api/videos/${id}`)
      this.fetchVideos()
    }
  }
}
</script>

高级功能实现

分片上传（大文件支持）

async uploadChunks(file) {
  const chunkSize = 5 * 1024 * 1024 // 5MB
  const chunks = Math.ceil(file.size / chunkSize)

  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize
    const end = Math.min(start + chunkSize, file.size)
    const chunk = file.slice(start, end)

    const formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('chunkIndex', i)
    formData.append('totalChunks', chunks)
    formData.append('fileId', this.fileId)

    await axios.post('/api/upload-chunk', formData)
    this.progress = Math.round(((i + 1) / chunks) * 100)
  }

  await axios.post('/api/merge-chunks', { 
    fileId: this.fileId,
    fileName: file.name
  })
}

视频预览生成 使用 FFmpeg 或其他工具在服务器端生成缩略图

// 服务器端使用fluent-ffmpeg
const ffmpeg = require('fluent-ffmpeg')

app.post('/api/generate-thumbnail', (req, res) => {
  const videoPath = req.body.videoPath
  const outputPath = `thumbnails/${Date.now()}.jpg`

  ffmpeg(videoPath)
    .screenshots({
      timestamps: ['00:00:01'],
      filename: outputPath,
      folder: './public'
    })
    .on('end', () => {
      res.json({ thumbnail: `/public/${outputPath}` })
    })
})