vue实现视频上传

2026-02-20 01:04:23VUE

使用 Vue 实现视频上传

前端实现

在 Vue 项目中，可以使用 <input type="file"> 元素或第三方库（如 vue-upload-component）实现视频上传功能。以下是一个基础实现示例：

vue实现视频上传

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

<script>
export default {
  data() {
    return {
      selectedFile: null,
      uploadProgress: 0
    };
  },
  methods: {
    handleFileUpload(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.uploadProgress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
          }
        });
        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

后端处理（Node.js 示例）

后端需要接收前端上传的视频文件并保存。以下是一个使用 Express 和 multer 的示例：

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) => {
  if (!req.file) {
    return res.status(400).send('未上传文件');
  }
  res.json({ 
    message: '上传成功',
    filename: req.file.filename,
    path: req.file.path
  });
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

优化上传体验

分片上传：大视频文件可以分片上传，避免单次上传失败导致重传。
断点续传：记录已上传的分片，实现断点续传功能。
预览功能：上传前生成视频缩略图或预览。

第三方服务

也可以使用第三方视频上传服务（如七牛云、阿里云 OSS）：

// 七牛云上传示例
import * as qiniu from 'qiniu-js';

const uploadVideoToQiniu = (file) => {
  const observable = qiniu.upload(
    file,
    null,
    'your-upload-token',
    { region: qiniu.region.z0 },
    { mimeType: 'video/*' }
  );

  observable.subscribe({
    next: (response) => {
      console.log('上传进度:', response.total.percent);
    },
    error: (err) => {
      console.error('上传失败:', err);
    },
    complete: (res) => {
      console.log('上传完成:', res);
    }
  });
};