当前位置：首页 > VUE

vue上传视频实现

2026-02-10 20:22:56VUE

Vue 上传视频实现

在 Vue 中实现视频上传功能，可以通过以下方法完成。以下步骤涵盖了从文件选择到上传至服务器的完整流程。

文件选择与预览

使用 <input type="file"> 结合 Vue 的 v-model 或事件监听实现文件选择。通过 URL.createObjectURL 生成预览链接。

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileChange" />
    <video v-if="videoUrl" :src="videoUrl" controls width="300"></video>
  </div>
</template>

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

文件上传

通过 FormData 对象将文件发送至服务器。使用 axios 或其他 HTTP 库实现上传。

methods: {
  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'
        }
      });
      console.log('Upload success:', response.data);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
}

进度显示

通过 axios 的 onUploadProgress 回调实现上传进度监控。

const response = await axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log('Upload progress:', percentCompleted + '%');
  }
});

文件校验

在上传前校验文件类型和大小。

handleFileChange(event) {
  const file = event.target.files[0];
  if (!file) return;

  const validTypes = ['video/mp4', 'video/webm'];
  const maxSize = 100 * 1024 * 1024; // 100MB

  if (!validTypes.includes(file.type)) {
    alert('Please select a valid video file (MP4 or WebM).');
    return;
  }

  if (file.size > maxSize) {
    alert('File size exceeds 100MB limit.');
    return;
  }

  this.selectedFile = file;
  this.videoUrl = URL.createObjectURL(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);
  }
}

后端配合示例（Node.js）

以下是一个简单的 Node.js Express 后端接收代码示例。

vue上传视频实现

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

app.post('/api/upload', upload.single('video'), (req, res) => {
  console.log('File uploaded:', req.file);
  res.json({ message: 'Upload successful' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});