ruoyi-vue-plus 大文件上传

### 关于 RuoYi-Vue-Plus 实现大文件上传 RuoYi-Vue-Plus 是基于 Spring Boot 和 Vue 的前后端分离快速开发平台。对于大文件分片上传功能，通常涉及前端将大文件切分成多个小片段并逐个发送到服务器，在服务端接收这些片段并将它们重新组合成完整的文件。 #### 前端处理逻辑 在前端部分，可以利用 JavaScript 或者一些专门用于处理文件分割的库来实现这一过程： 1. **读取文件**: 使用 `FileReader` API 来异步加载本地文件。 2. **切割文件**: 将整个文件按照指定大小切成若干个小块（例如每块 5MB），这一步骤可以通过创建 Blob 对象或者使用 ArrayBuffer 完成。 3. **发起请求**: 利用 AJAX 请求或者其他 HTTP 库像 Axios 发送每一个碎片至后台接口；每次只传输一部分数据而不是全部一次性提交上去以减少内存占用和网络压力。 4. **进度条更新**: 根据已成功传送的数据量动态调整 UI 上显示给用户的百分比指示器。 ```javascript // 示例代码展示如何通过JavaScript进行文件分片上传 function uploadChunks(file, chunkSize = 5 * 1024 * 1024) { let chunks = []; for (let start = 0; start < file.size; start += chunkSize) { const end = Math.min(start + chunkSize, file.size); chunks.push(file.slice(start, end)); } async function sendChunk(index) { try { await axios.post('/api/upload', new FormData().append('file', chunks[index])); console.log(`Uploaded chunk ${index}`); if (++index < chunks.length){ await sendChunk(index); } } catch(error){ console.error(`Failed to upload chunk ${index}`, error); } } sendChunk(0).then(() => console.log("All chunks uploaded")); } ``` #### 后端处理逻辑 后端需要能够接受来自客户端发来的各个独立的小包，并安全可靠地保存下来直到所有的都到达为止。考虑到并发性和安全性等因素，建议采用如下策略: 1. **唯一标识符生成**: 给定每个待上传的大文件分配独一无二的名字作为其在整个过程中使用的 ID。 2. **临时存储路径设置**: 创建特定目录用来暂存接收到的部分内容直至最终合成完毕后再移动目标位置。 3. **合并算法设计**: 当所有预期中的分片都被收集齐之后执行拼接动作形成原始文档副本。 4. **错误恢复机制建立**: 如果中途有失败情况发生，则允许用户继续未完成的任务而不必重头再来一遍。 ```java @Slf4j @Service public class LargeFileUploadService { private static final String TEMP_DIR = "/path/to/temp/dir/"; /** * 接收单个分片并将其保存到临时目录下. */ @PostMapping("/upload") public ResponseEntity<String> handleFilePart(@RequestParam("file") MultipartFile part, @RequestParam("identifier") String identifier, @RequestParam("chunkIndex") int chunkIndex) throws IOException { Path tempFilePath = Paths.get(TEMP_DIR, identifier + "_" + chunkIndex); Files.copy(part.getInputStream(), tempFilePath, StandardCopyOption.REPLACE_EXISTING); log.info("Received and saved chunk {} of {}", chunkIndex, identifier); return ResponseEntity.ok("OK"); } /** * 所有的分片都已经上传完成后调用此方法来进行最后的组装工作. */ @GetMapping("/complete/{id}") public ResponseEntity<Void> completeUpload(@PathVariable String id) { // 这里应该加入验证逻辑确认确实收到了所有必要的分片 File outputFile = new File("/destination/path/" + id); List<File> parts = Arrays.asList(new File(TEMP_DIR).listFiles((dir, name) -> name.startsWith(id))); try (OutputStream outStream = new FileOutputStream(outputFile)) { for (File part : parts.sort()) { Files.copy(part.toPath(), outStream); } } catch (IOException e) { throw new RuntimeException(e); } // 清理临时文件... parts.forEach(File::delete); return ResponseEntity.noContent().build(); } } ``` 上述方案不仅适用于普通的 Web 应用程序，也适合集成进更复杂的微服务体系结构之中。当然实际项目中还需要考虑诸如断点续传、重复检测等功能特性以及性能优化等问题[^1]。