Spring Boot 文件上传下载 | Element Plus 实战教程

在 Spring Boot 中使用 Element Plus 进行文件上传和下载可以使用以下步骤：\n\n1. 添加 Element Plus 依赖：在 pom.xml 文件中添加 Element Plus 的依赖。\n\nxml\n<dependency>\n <groupId>io.springfox</groupId>\n <artifactId>springfox-boot-starter</artifactId>\n <version>3.0.0</version>\n</dependency>\n\n\n2. 创建文件上传接口：创建一个文件上传的接口，通过 @PostMapping 注解指定请求路径，通过 @RequestParam 注解获取上传的文件。\n\njava\n@PostMapping("/upload")\npublic String uploadFile(@RequestParam("file") MultipartFile file) {\n // 处理文件上传逻辑\n return "success";\n}\n\n\n3. 创建文件下载接口：创建一个文件下载的接口，通过 @GetMapping 注解指定请求路径，通过 @PathVariable 注解获取文件名。\n\njava\n@GetMapping("/download/{fileName}")\npublic ResponseEntity<Resource> downloadFile(@PathVariable String fileName) {\n // 处理文件下载逻辑\n // 使用 ResponseEntity<Resource> 将文件资源返回给客户端\n return ResponseEntity.ok()\n .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\""+ fileName + "\"")\n .body(fileResource);\n}\n\n\n4. 创建文件上传和下载的前端页面：在前端页面中使用 Element Plus 的 el-upload 组件进行文件上传，使用 el-button 组件配合 window.open 方法进行文件下载。\n\nhtml\n<!-- 文件上传 -->\n<el-upload\n action="/upload"\n :on-success="handleUploadSuccess"\n :auto-upload="false">\n <el-button slot="trigger" size="small" type="primary">点击上传</el-button>\n</el-upload>\n\n<!-- 文件下载 -->\n<el-button type="primary" @click="handleDownload">点击下载</el-button>\n\n\n5. 处理文件上传成功和下载的方法：在 Vue 的方法中处理文件上传成功和下载的逻辑。\n\njavascript\nmethods: {\n handleUploadSuccess(response) {\n // 处理文件上传成功逻辑\n },\n handleDownload() {\n window.open('/download/fileName');\n }\n}\n\n\n以上就是使用 Spring Boot 和 Element Plus 进行文件上传和下载的基本步骤。根据实际需求，你可以进一步完善文件上传和下载的逻辑。