Vue 项目中如何高效处理大量文件上传？

vue.js

2024-07-11 21:52:41

如何在 Vue 项目中高效处理大量文件上传？

你是否遇到过用户需要一次性上传大量文件到你的 Vue 应用，却导致浏览器崩溃的窘境？特别是当文件数量达到 80-100 个，每个文件大小达到 5-8 MB 时，传统的表单上传方式就显得力不从心了。

本文将深入探讨如何在 Vue 项目中结合 Symfony 后端，高效处理大量文件上传，并提供可实际操作的代码示例。

文件上传之殇：传统方式的瓶颈

试想一下，用户兴致勃勃地选择了一堆照片或视频，准备上传到你的网站。然而，进度条却卡在那里一动不动，浏览器变得异常卡顿，最后甚至崩溃，用户只能无奈地放弃操作。这就是传统表单上传方式所面临的困境。

传统的表单上传方式将所有文件打包成一个巨大的请求体发送到服务器。这种“简单粗暴”的方式存在以下弊端：

浏览器不堪重负 : 大量的文件处理和传输会占用大量的浏览器资源，容易导致浏览器卡顿甚至崩溃，尤其是在处理图片、视频等大文件时更是如此。
网络传输缓慢 : 一次性传输大量数据会对网络带宽造成巨大压力，上传时间过长，用户只能眼睁睁地看着进度条缓慢移动，体验极差。
服务器压力山大 : 服务器端需要接收和处理整个庞大的请求体，容易造成服务器资源紧张，影响其他用户的正常访问。

分而治之：分片上传化解难题

为了解决传统方式的弊端，我们可以采用分片上传 的方式。其核心思想是将大文件分割成多个小文件块，分别上传至服务器，最后在服务器端进行合并。

就像拼图一样，将一个巨大的拼图拆分成多个小块，分别拼好后再组合起来，可以更加轻松高效。

分片上传的优势在于：

减轻浏览器负担 : 浏览器只需处理单个小文件块，减轻了资源占用，避免了崩溃的风险。
提高网络利用率 : 可以并发上传多个文件块，充分利用网络带宽，就像多条车道同时通行，缩短上传时间。
断点续传更可靠 : 如果上传过程中出现网络中断，只需重新上传未完成的文件块，避免了从头开始上传的麻烦。
降低服务器压力 : 服务器可以逐个接收和处理文件块，避免了资源的集中消耗，就像流水线作业一样，提高效率。

Vue + Symfony 强强联手：实现分片上传

接下来，我们将结合 Vue 和 Symfony 框架，展示如何实现分片上传功能。

前端 (Vue) :

选择文件 : 使用 <input type="file" multiple> 允许用户选择多个文件，就像在文件管理器中选择多个文件一样简单。
文件分片 : 利用 JavaScript 的 File 对象 API 将每个文件分割成多个大小相等的块 (例如 1MB)，就像将一块蛋糕切成均等的几块。

const chunkSize = 1024 * 1024; // 1MB

const sliceFile = (file) => {
  let chunks = [];
  let start = 0;

  while (start < file.size) {
    chunks.push(file.slice(start, start + chunkSize));
    start += chunkSize;
  }

  return chunks;
};

并发上传 : 使用 axios 或 fetch 等 HTTP 客户端，将每个文件块并发上传至服务器，就像多辆卡车同时运送货物，提高效率。
上传进度 : 监听每个文件块的上传进度，并在前端界面实时展示给用户，就像快递app显示包裹的实时位置一样，让用户清楚了解上传进度。

后端 (Symfony) :

接收文件块 : 创建一个 API 接口，用于接收前端上传的文件块，就像设立一个专门的仓库，用于接收货物。
存储文件块 : 将接收到的文件块存储在临时目录中，就像将货物分类存放，等待下一步处理。
合并文件块 : 当所有文件块上传完成后，创建一个新的 API 接口，用于合并所有文件块，生成完整的文件，就像将拼图碎片拼成完整的图案。
删除临时文件 : 合并完成后，删除临时存储的文件块，就像清理仓库，释放空间。

代码示例

前端 (Vue) :

<template>
  <div>
    <input type="file" multiple @change="handleFileChange">
    <button @click="uploadFiles">上传</button>
    <div v-for="file in files" :key="file.name">
      {{ file.name }} - {{ file.progress }}%
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
    };
  },
  methods: {
    handleFileChange(event) {
      this.files = Array.from(event.target.files);
    },
    async uploadFiles() {
      for (const file of this.files) {
        const chunks = this.sliceFile(file);
        for (let i = 0; i < chunks.length; i++) {
          await this.uploadFileChunk(file, chunks[i], i);
        }
      }
    },
    async uploadFileChunk(file, chunk, index) {
      const formData = new FormData();
      formData.append('file', chunk);
      formData.append('filename', file.name);
      formData.append('chunkIndex', index);
      formData.append('totalChunks', file.chunks.length);

      try {
        const response = await axios.post('/api/upload', formData, {
          onUploadProgress: (progressEvent) => {
            file.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          },
        });
        // 处理服务器响应
      } catch (error) {
        // 处理上传错误
      }
    },
    sliceFile(file) {
      // ... (参考上面的文件分片代码)
    },
  },
};
</script>

后端 (Symfony) :

// src/Controller/UploadController.php

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class UploadController extends AbstractController
{
    #[Route('/api/upload', name: 'upload', methods: ['POST'])]
    public function upload(Request $request): Response
    {
        $file = $request->files->get('file');
        $filename = $request->request->get('filename');
        $chunkIndex = $request->request->get('chunkIndex');
        $totalChunks = $request->request->get('totalChunks');

        // ... (存储文件块逻辑)

        if ($chunkIndex === $totalChunks - 1) {
            // ... (合并文件块逻辑)
        }

        return new Response('OK');
    }
}