首页 / 新闻资讯 / Vue 中实现视频压缩与上传的最佳实践

Vue 中实现视频压缩与上传的最佳实践

发布时间：2026-08-05 作者：吴敏 阅读量：13

引言

随着移动设备的普及，用户经常需要上传大体积的视频文件。在 Vue 应用中，直接上传原始视频可能导致加载缓慢、服务器存储压力增大等问题。因此，在前端实现视频压缩成为优化用户体验的重要手段。

技术选型

在 Vue 中处理视频压缩，可以考虑以下工具：

  • FFmpeg.wasm：基于 WebAssembly 的 FFmpeg 版本，允许在浏览器中运行视频处理命令。
  • video.js 或 MediaRecorder API：用于录制和初步压缩，但灵活性较低。
  • 第三方压缩库：如 compressorjs，但主要针对图片，视频支持有限。

推荐使用 FFmpeg.wasm，因为它提供了强大的压缩参数控制，支持多种格式。

实现步骤

1. 安装和配置 FFmpeg.wasm

在 Vue 项目中，通过 npm 安装依赖：

npm install @ffmpeg/ffmpeg @ffmpeg/util

在组件中加载 FFmpeg：

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

const ffmpeg = new FFmpeg();
await ffmpeg.load();

2. 视频压缩逻辑

使用 FFmpeg 命令压缩视频，例如调整比特率和分辨率：

async function compressVideo(file) {
  const inputName = 'input.mp4';
  const outputName = 'output.mp4';
  await ffmpeg.writeFile(inputName, await fetchFile(file));
  await ffmpeg.exec(['-i', inputName, '-b:v', '1M', '-s', '640x480', outputName]);
  const data = await ffmpeg.readFile(outputName);
  return new Blob([data.buffer], { type: 'video/mp4' });
}

3. 在 Vue 组件中集成

创建一个视频上传组件，使用 el-input 或自定义文件选择器，并通过 v-model 绑定文件：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileSelect" />
    <button @click="uploadVideo">压缩并上传</button>
    <p>进度: {{ progress }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      progress: 0
    };
  },
  methods: {
    handleFileSelect(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadVideo() {
      if (!this.selectedFile) return;
      const compressedBlob = await compressVideo(this.selectedFile);
      // 使用 axios 上传
      const formData = new FormData();
      formData.append('video', compressedBlob);
      await axios.post('/api/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        }
      });
    }
  }
};
</script>

性能优化

  • 懒加载 FFmpeg：仅在用户需要时加载 WASM 文件，减少初始负载。
  • 使用 Web Workers：将压缩任务放到后台线程，避免阻塞 UI。
  • 分片上传：对于大文件，结合压缩后的分片上传（如使用 tus-js-client）。

注意事项

浏览器兼容性是一个关键问题。FFmpeg.wasm 需要 WebAssembly 支持，在 IE 等旧浏览器中可能失效。建议提供降级方案，如直接上传原始视频。

结论

在 Vue 中集成视频压缩上传功能，可以显著提升应用性能。通过合理的技术选型和代码优化，开发者能够实现用户友好的视频处理流程。

相关文章