前端Vue使用ffmpeg压缩视频再上传（全网唯一公开真正实现）

<template>
  <div>
    <input type="file" @change="compressAndUpload" />
    <progress :value="progress" max="100"></progress>
  </div>
</template>
 
<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
 
const ffmpeg = createFFmpeg({ log: true });
 
export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    async compressAndUpload() {
      const { createObjectURL } = window;
      const input = this.$el.querySelector('input');
      const file = input.files[0];
      const src = createObjectURL(file);
      input.value = '';
 
      if (!ffmpeg.isLoaded()) {
        await ffmpeg.load();
      }
 
      ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(src));
 
      // 设置ffmpeg参数
      ffmpeg.FS('writeFile', 'ffmpeg-commands.txt', '');
 
      const { stdout, stderr } = await ffmpeg.write('ffmpeg-commands.txt', 'ffmpeg -i input.mp4 -c:v libx264 -crf 24 output.mp4\n');
      await ffmpeg.run('ffmpeg-commands.txt');
 
      ffmpeg.FS('unlink', 'input.mp4');
      ffmpeg.FS('unlink', 'ffmpeg-commands.txt');
 
      const data = ffmpeg.FS('readFile', 'output.mp4');
      const compressedFile = new Blob([data.buffer], { type: 'video/mp4' });
      const compressedUrl = URL.createObjectURL(compressedFile);
 
      // 创建并发送上传请求
      const upload = await fetch('YOUR_UPLOAD_ENDPOINT', {
        method: 'POST',
        body: compressedFile,
      });
 
      this.progress = 100; // 更新进度条
 
      // 清理并释放资源
      URL.revokeObjectURL(src);
      URL.revokeObjectURL(compressedUrl);
    },
  },
};
</script>

这段代码展示了如何在Vue应用中使用ffmpeg压缩视频文件，并通过HTTP请求上传到服务器。注意，你需要替换YOUR_UPLOAD_ENDPOINT为你的实际上传服务地址。此外，代码中使用了ES6的async/await语法，确保异步操作更加易读。