實驗- 分片上傳 VS 直接上傳

分片上傳和直接上傳是兩種常見的文件上傳方式。分片上傳將文件分成多個小塊，每次上傳一個小塊，可以并行處理多個分片，適用于大文件上傳，減少了單個請求的大小，能有效避免因網絡波動或上傳中斷導致的失敗，并支持斷點續傳。相比之下，直接上傳是將文件作為一個整體上傳，通常適用于較小的文件，簡單快捷，但對于大文件來說，容易受到網絡環境的影響，上傳中斷時需要重新上傳整個文件。因此，分片上傳在大文件上傳中具有更高的穩定性和可靠性。

FileUploadController

package per.mjn.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import per.mjn.service.FileUploadService;import java.io.File;
import java.io.IOException;
import java.util.List;@RestController
@RequestMapping("/upload")
public class FileUploadController {private static final String UPLOAD_DIR = "F:/uploads/";@Autowiredprivate FileUploadService fileUploadService;// 啟動文件分片上傳@PostMapping("/start")public ResponseEntity<String> startUpload(@RequestParam("file") MultipartFile file,@RequestParam("totalParts") int totalParts,@RequestParam("partIndex") int partIndex) {try {String fileName = file.getOriginalFilename();fileUploadService.saveChunk(file, partIndex);  // 存儲單個分片return ResponseEntity.ok("Chunk " + partIndex + " uploaded successfully.");} catch (IOException e) {return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error uploading chunk: " + e.getMessage());}}// 多線程并行上傳所有分片@PostMapping("/uploadAll")public ResponseEntity<String> uploadAllChunks(@RequestParam("file") List<MultipartFile> files,@RequestParam("fileName") String fileName) {try {fileUploadService.uploadChunksInParallel(files, fileName);  // 調用并行上傳方法return ResponseEntity.ok("All chunks uploaded successfully.");} catch (Exception e) {return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error uploading chunks: " + e.getMessage());}}// 合并文件分片@PostMapping("/merge")public ResponseEntity<String> mergeChunks(@RequestParam("fileName") String fileName,@RequestParam("totalParts") int totalParts) {try {System.out.println(fileName);System.out.println(totalParts);fileUploadService.mergeChunks(fileName, totalParts);return ResponseEntity.ok("File uploaded and merged successfully.");} catch (IOException e) {return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error merging chunks: " + e.getMessage());}}// 直接上傳整個文件@PostMapping("/file")public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {try {String fileName = file.getOriginalFilename();File targetFile = new File(UPLOAD_DIR + fileName);File dir = new File(UPLOAD_DIR);if (!dir.exists()) {dir.mkdirs();}file.transferTo(targetFile);return ResponseEntity.ok("File uploaded successfully: " + fileName);} catch (IOException e) {return ResponseEntity.status(500).body("Error uploading file: " + e.getMessage());}}
}

FileUploadService

package per.mjn.service;import org.springframework.web.multipart.MultipartFile;import java.io.IOException;
import java.util.List;public interface FileUploadService {public void saveChunk(MultipartFile chunk, int partIndex) throws IOException;public void uploadChunksInParallel(List<MultipartFile> chunks, String fileName);public void mergeChunks(String fileName, int totalParts) throws IOException;
}

FileUploadServiceImpl

package per.mjn.service.impl;import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import per.mjn.service.FileUploadService;import java.io.*;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Callable;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;@Service
public class FileUploadServiceImpl implements FileUploadService {private static final String UPLOAD_DIR = "F:/uploads/";private final ExecutorService executorService;public FileUploadServiceImpl() {// 使用一個線程池來并發處理上傳this.executorService = Executors.newFixedThreadPool(4); // 4個線程用于并行上傳}// 保存文件分片public void saveChunk(MultipartFile chunk, int partIndex) throws IOException {File dir = new File(UPLOAD_DIR);if (!dir.exists()) {dir.mkdirs();}File chunkFile = new File(UPLOAD_DIR + chunk.getOriginalFilename() + ".part" + partIndex);chunk.transferTo(chunkFile);}// 處理所有分片的上傳public void uploadChunksInParallel(List<MultipartFile> chunks, String fileName) {List<Callable<Void>> tasks = new ArrayList<>();for (int i = 0; i < chunks.size(); i++) {final int index = i;final MultipartFile chunk = chunks.get(i);tasks.add(() -> {try {saveChunk(chunk, index);System.out.println("Uploaded chunk " + index + " of " + fileName);} catch (IOException e) {e.printStackTrace();}return null;});}try {// 執行所有上傳任務executorService.invokeAll(tasks);} catch (InterruptedException e) {e.printStackTrace();}}// 合并文件分片public void mergeChunks(String fileName, int totalParts) throws IOException {File mergedFile = new File(UPLOAD_DIR + fileName);try (BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(mergedFile))) {for (int i = 0; i < totalParts; i++) {File chunkFile = new File(UPLOAD_DIR + fileName + ".part" + i);try (BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(chunkFile))) {byte[] buffer = new byte[8192];int bytesRead;while ((bytesRead = inputStream.read(buffer)) != -1) {outputStream.write(buffer, 0, bytesRead);}}chunkFile.delete(); // 刪除臨時分片文件}}}
}

前端測試界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Upload</title>
</head>
<body><h1>File Upload</h1><input type="file" id="fileInput"><button onclick="startUpload()">Upload File</button><button onclick="directUpload()">Upload File Directly</button><script>const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB per chunkconst fileInput = document.querySelector('#fileInput');let totalChunks;function startUpload() {const file = fileInput.files[0];totalChunks = Math.ceil(file.size / CHUNK_SIZE);let currentChunk = 0;let files = [];while (currentChunk < totalChunks) {const chunk = file.slice(currentChunk * CHUNK_SIZE, (currentChunk + 1) * CHUNK_SIZE);files.push(chunk);currentChunk++;}// 并行上傳所有分片uploadAllChunks(files, file.name);}function uploadAllChunks(chunks, fileName) {const promises = chunks.map((chunk, index) => {const formData = new FormData();formData.append('file', chunk, fileName);formData.append('partIndex', index);formData.append('totalParts', totalChunks);formData.append('fileName', fileName);return fetch('http://172.20.10.2:8080/upload/start', {method: 'POST',body: formData}).then(response => response.text()).then(data => console.log(`Chunk ${index} uploaded successfully.`)).catch(error => console.error(`Error uploading chunk ${index}`, error));});// 等待所有分片上傳完成Promise.all(promises).then(() => {console.log('All chunks uploaded, now merging.');mergeChunks(fileName);}).catch(error => console.error('Error during uploading chunks', error));}function mergeChunks(fileName) {fetch(`http://172.20.10.2:8080/upload/merge?fileName=${fileName}&totalParts=${totalChunks}`, {method: 'POST'}).then(response => response.text()).then(data => console.log('File uploaded and merged successfully.')).catch(error => console.error('Error merging chunks', error));}// 直接上傳整個文件function directUpload() {const file = fileInput.files[0];if (!file) {alert('Please select a file to upload.');return;}const formData = new FormData();formData.append('file', file); // 將整個文件添加到 FormDatafetch('http://172.20.10.2:8080/upload/file', {method: 'POST',body: formData}).then(response => response.text()).then(data => console.log('File uploaded directly: ', data)).catch(error => console.error('Error uploading file directly', error));}</script>
</body>
</html>