当前位置：首页 > VUE

vue上传视频实现

2026-01-08 05:46:57VUE

Vue 实现视频上传功能

安装依赖

确保项目中已安装 axios 或 vue-upload-component 等上传库。通过 npm 安装：

npm install axios

前端组件实现

创建一个 Vue 组件用于视频上传，包含文件选择按钮和上传逻辑：

vue上传视频实现

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileChange" />
    <button @click="uploadVideo">上传视频</button>
    <p v-if="progress > 0">上传进度: {{ progress }}%</p>
  </div>
</template>

<script>
import axios from 'axios';

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, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            this.progress = Math.round(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          }
        });
        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

后端接口处理

假设使用 Node.js + Express 作为后端，处理上传请求的示例：

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage });

app.post('/api/upload', upload.single('video'), (req, res) => {
  res.json({ message: '视频上传成功', file: req.file });
});

app.listen(3000, () => console.log('服务器启动'));

进度显示优化

通过 onUploadProgress 回调实时更新上传进度条：

vue上传视频实现

<progress :value="progress" max="100"></progress>

文件验证

在上传前验证文件类型和大小：

methods: {
  handleFileChange(event) {
    const file = event.target.files[0];
    if (!file.type.includes('video/')) {
      alert('请选择视频文件');
      return;
    }
    if (file.size > 100 * 1024 * 1024) { // 100MB限制
      alert('文件大小超过限制');
      return;
    }
    this.selectedFile = file;
  }
}

分块上传（大文件）

对于大视频文件，可采用分块上传策略：

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('fileName', file.name);

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