vue3 + springboot3 大文件断点续传

在Vue 3和Spring Boot 3中实现大文件断点续传，你需要在前端和后端之间建立一个支持断点续传的上传机制。

后端 (Spring Boot 3):

1. 使用@RestController处理文件上传的HTTP请求。
2. 使用MultipartFile接收文件。
3. 使用FileOutputStream以追加模式写入文件。
4. 使用@RequestHeader获取客户端传来的断点位置。

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
import java.io.FileOutputStream;
import java.nio.file.Paths;
 
@RestController
public class FileUploadController {
 
    @PostMapping("/upload")
    public String uploadFile(
        @RequestParam("file") MultipartFile file,
        @RequestHeader(value = "Range", required = false) String range) {
        try {
            long startPos = 0;
            if (range != null && range.startsWith("bytes=")) {
                String[] values = range.split("=")[1].split("-");
                startPos = Long.parseLong(values[0]);
            }
 
            FileOutputStream fos = new FileOutputStream(
                Paths.get("upload-dir", file.getOriginalFilename()).toFile(), true);
            fos.skip(startPos); // 跳过已上传的部分
            fos.write(file.getBytes());
            fos.close();
 
            return "File uploaded successfully";
        } catch (Exception e) {
            e.printStackTrace();
            return "Upload failed";
        }
    }
}

前端 (Vue 3):

1. 使用axios发送带有Content-Range头的HTTP PUT请求。
2. 将文件切片并逐个上传。

import axios from 'axios';
 
const uploadFile = async (file, chunkSize, chunk, totalChunks, uploadUrl) => {
    const chunkStart = chunk * chunkSize;
    const chunkEnd = (chunk + 1) * chunkSize > file.size ? file.size : (chunk + 1) * chunkSize;
    const contentRange = `bytes ${chunkStart}-${chunkEnd - 1}/${file.size}`;
 
    const formData = new FormData();
    formData.append('file', file.slice(chunkStart, chunkEnd));
 
    try {
        const response = await axios.put(uploadUrl, formData, {
            headers: {
                'Content-Range': contentRange,
                'Content-Disposition': `attachment; filename="${file.name}"`,
            },
        });