Spring Boot + Vue3 + axios 文件上传下载 实时进度条 - 完整指南

"使用 Spring Boot + Vue3 + axios 实现文件上传和下载，并为其添加实时进度条的功能"\n\n要实现文件上传和下载，并添加实时进度条的功能，可以按照以下步骤进行操作：\n\n1. 创建一个 Spring Boot 项目，并添加必要的依赖，包括 Spring Web 和 Spring Boot DevTools。\n2. 创建一个用于文件上传的 Controller 类，包含两个接口：上传文件和下载文件。可以使用 @RestController 注解来定义 Controller 类，并使用 @PostMapping 和 @GetMapping 注解来定义接口。\n3. 在 Controller 类中，使用 MultipartFile 类型的参数来接收上传的文件。可以使用 @RequestParam 注解来指定文件参数的名称。\n4. 在上传文件的接口中，使用 MultipartFile 的 transferTo() 方法将文件保存到指定的路径中。\n5. 在下载文件的接口中，使用 ResponseEntity 来包装文件，并设置 Content-Disposition 头部信息，指定文件的名称和类型。\n6. 创建一个 Vue3 项目，并安装 axios 库，用于发送 HTTP 请求。\n7. 在 Vue3 项目中，创建一个文件上传组件和一个文件下载组件。\n8. 在文件上传组件中，使用 <input type="file"> 元素来选择文件，并使用 axios 的 post 方法将文件发送到后端。\n9. 在文件下载组件中，使用 axios 的 get 方法发送请求，获取文件数据，并使用 window.URL.createObjectURL 方法创建一个下载链接。\n10. 在文件上传和下载组件中，使用 Vue3 的响应式数据来实时更新进度条的值。\n\n以下是一个简单的示例代码，用于演示如何使用 Spring Boot 和 Vue3 实现文件上传和下载，并添加实时进度条的功能。\n\njava\n// FileController.java\n\nimport org.springframework.http.ResponseEntity;\nimport org.springframework.web.bind.annotation.*;\nimport org.springframework.web.multipart.MultipartFile;\n\nimport java.io.File;\nimport java.io.IOException;\n\n@RestController\npublic class FileController {\n\n private static final String UPLOAD_PATH = "/path/to/upload/directory";\n\n @PostMapping("/upload")\n public void uploadFile(@RequestParam("file") MultipartFile file) throws IOException {\n if (!file.isEmpty()) {\n file.transferTo(new File(UPLOAD_PATH + File.separator + file.getOriginalFilename()));\n }\n }\n\n @GetMapping("/download")\n public ResponseEntity<Object> downloadFile() {\n File file = new File(UPLOAD_PATH + File.separator + "example.txt");\n return ResponseEntity.ok()\n .header("Content-Disposition", "attachment; filename=" + file.getName())\n .body(file);\n }\n}\n\n\nvue\n// UploadFile.vue\n\n<template>\n <div>\n <input type="file" @change="handleFileChange">\n <button @click="uploadFile">Upload</button>\n <div v-if="uploadProgress > 0">\n <progress :value="uploadProgress" max="100"></progress>\n {{ uploadProgress }}%\n </div>\n </div>\n</template>\n\n<script>\nimport axios from 'axios';\n\nexport default {\n data() {\n return {\n file: null,\n uploadProgress: 0,\n };\n },\n methods: {\n handleFileChange(event) {\n this.file = event.target.files[0];\n },\n uploadFile() {\n const formData = new FormData();\n formData.append('file', this.file);\n\n axios.post('/upload', formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n onUploadProgress: (progressEvent) => {\n this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);\n },\n }).then(() => {\n this.uploadProgress = 0;\n }).catch((error) => {\n console.error(error);\n });\n },\n },\n};\n</script>\n\n\nvue\n// DownloadFile.vue\n\n<template>\n <div>\n <button @click="downloadFile">Download</button>\n </div>\n</template>\n\n<script>\nimport axios from 'axios';\n\nexport default {\n methods: {\n downloadFile() {\n axios.get('/download', {\n responseType: 'blob',\n }).then((response) => {\n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute('download', 'example.txt');\n link.click();\n window.URL.revokeObjectURL(url);\n }).catch((error) => {\n console.error(error);\n });\n },\n },\n};\n</script>\n\n\n你可以根据需要进一步完善和调整这些代码，使其适应你的项目要求和 UI 样式。\n