vue 实现视频上传

实现视频上传的基本步骤

安装必要的依赖库，如axios用于文件上传，vue-video-player用于视频预览（可选）。

npm install axios vue-video-player

创建上传组件

在Vue组件中创建文件输入元素，绑定change事件处理文件选择。

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

处理文件选择和上传

在methods中实现文件处理和上传逻辑，使用FormData对象包装文件数据。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      videoUrl: ''
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      this.videoUrl = URL.createObjectURL(this.selectedFile);
    },
    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('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

服务器端处理

创建简单的Node.js Express服务器处理上传请求，使用multer中间件处理文件上传。

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('服务器运行在端口3000');
});

进度显示和限制

添加上传进度显示和文件大小限制，提升用户体验。

methods: {
  async uploadVideo() {
    if (!this.selectedFile) return;

    // 文件大小限制（50MB）
    const maxSize = 50 * 1024 * 1024;
    if (this.selectedFile.size > maxSize) {
      alert('文件大小超过50MB限制');
      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 => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          console.log(`上传进度: ${percentCompleted}%`);
        }
      });
      console.log('上传成功:', response.data);
    } catch (error) {
      console.error('上传失败:', error);
    }
  }
}

视频预览优化

使用vue-video-player提供更好的视频预览体验。

import { videoPlayer } from 'vue-video-player';

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: []
      }
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      this.playerOptions.sources = [{
        type: this.selectedFile.type,
        src: URL.createObjectURL(this.selectedFile)
      }];
    }
  }
};

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