Springboot + vue3 实现大文件上传方案：秒传、断点续传、分片上传、前端异步上传

Spring Boot + Vue 3 实现大文件上传方案

在现代 web 应用中，文件上传是一个常见且重要的功能。对于大文件的上传，我们需要考虑用户体验、网络稳定性以及上传效率等因素。因此，采用秒传、断点续传、分片上传和前端异步上传等技术方案，可以大大提高大文件上传的性能和用户体验。本文将详细介绍如何在 Spring Boot 后端和 Vue 3 前端实现大文件上传。

1. 基本概念

• 秒传：如果文件已经存在于服务器端，则直接返回文件的访问地址，而无需重新上传。
• 断点续传：在上传过程中，如果发生中断，可以从中断的地方继续上传。
• 分片上传：将大文件分成多个小块进行上传，每个小块可以独立处理，成功后合并成完整文件。
• 前端异步上传：使用异步请求，使用户可以在等待上传完成时进行其他操作，提高了用户体验。

2. Spring Boot 后端示例

首先，我们需要设置一个 Spring Boot 项目，并实现文件上传的 API。

2.1 添加依赖

在 pom.xml 中添加必要的依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

2.2 实现上传接口

创建一个 FileUploadController：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

@RestController
@RequestMapping("/api/upload")
public class FileUploadController {

    private static final String UPLOAD_DIR = "/path/to/upload/directory/";

    @PostMapping("/chunk")
    public String uploadChunk(@RequestParam("file") MultipartFile file,
                              @RequestParam("chunkIndex") int chunkIndex,
                              @RequestParam("totalChunks") int totalChunks) throws IOException {
        FileOutputStream fos = new FileOutputStream(UPLOAD_DIR + "file-" + chunkIndex);
        fos.write(file.getBytes());
        fos.close();

        // 检查是否所有的分片都上传完毕，执行合并等操作
        if (chunkIndex == totalChunks - 1) {
            mergeChunks(totalChunks);
        }
        return "Chunk uploaded successfully";
    }

    private void mergeChunks(int totalChunks) {
        // 合并逻辑
    }
}

3. Vue 3 前端示例

3.1 创建文件上传组件

使用 Vue 3 创建一个简单的文件上传组件：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      chunkSize: 1024 * 1024, // 每个分片大小1MB
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      const totalChunks = Math.ceil(this.file.size / this.chunkSize);
      for (let i = 0; i < totalChunks; i++) {
        const chunk = this.file.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
        const formData = new FormData();
        formData.append("file", chunk);
        formData.append("chunkIndex", i);
        formData.append("totalChunks", totalChunks);

        await fetch('/api/upload/chunk', {
          method: 'POST',
          body: formData
        });
      }
      alert('文件上传完成');
    }
  }
}
</script>

4. 总结

本文介绍了如何在 Spring Boot 和 Vue 3 中实现大文件上传的几个关键技术概念，包括秒传、断点续传、分片上传和前端异步上传。通过将大文件分片处理，不仅可以提高上传的成功率，还能有效应对网络不稳定等问题。希望这个示例对你在实际开发中有所帮助。