vue实现上传视频

2026-03-29 14:54:17VUE

实现上传视频功能

使用Vue实现上传视频功能可以通过以下步骤完成，结合HTML5的<input type="file">和Vue的事件绑定。

基础文件上传

创建一个文件选择输入框，并监听change事件以获取用户选择的文件。

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileUpload" />
    <button @click="uploadVideo">上传视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadVideo() {
      if (!this.selectedFile) {
        alert('请选择视频文件');
        return;
      }
      const formData = new FormData();
      formData.append('video', this.selectedFile);

      // 使用axios或其他HTTP库发送请求
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

显示上传进度

如果需要显示上传进度，可以利用axios的onUploadProgress回调。

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

  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}%`);
    }
  }).then(response => {
    console.log('上传成功', response.data);
  }).catch(error => {
    console.error('上传失败', error);
  });
}

预览视频

在用户选择视频后，可以生成一个预览链接供用户查看。

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

<script>
export default {
  data() {
    return {
      selectedFile: null,
      videoUrl: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      this.videoUrl = URL.createObjectURL(this.selectedFile);
    },
    uploadVideo() {
      // 上传逻辑
    }
  },
  beforeDestroy() {
    if (this.videoUrl) {
      URL.revokeObjectURL(this.videoUrl);
    }
  }
};
</script>

文件大小和类型验证

在上传前验证文件类型和大小，避免无效上传。

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

  const validTypes = ['video/mp4', 'video/webm', 'video/ogg'];
  if (!validTypes.includes(file.type)) {
    alert('请上传有效的视频文件 (MP4, WebM, Ogg)');
    return;
  }

  const maxSize = 100 * 1024 * 1024; // 100MB
  if (file.size > maxSize) {
    alert('视频文件大小不能超过100MB');
    return;
  }

  this.selectedFile = file;
  this.videoUrl = URL.createObjectURL(file);
}

服务器端处理

服务器端需要接收并处理上传的视频文件。以下是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('文件已保存:', req.file);
  res.json({ message: '上传成功', file: req.file });
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});