Vue与SpringBoot实现文件上传及下载教程

该资源主要介绍了如何在Vue.js前端与Spring Boot后端之间实现文件上传和下载的功能。文章提到了两个关键部分：Vue.js的文件选择和上传逻辑，以及Spring Boot后端处理文件上传的接口。 （一）、上传文件 在Vue.js中，通过HTML的`<input type="file">`元素可以实现文件的选择。为了支持单个或多个文件的选择，以及整个文件夹的选择，有两个不同的`<input>`标签被使用。第一个`<input>`标签允许用户选择多个文件，而第二个`<input>`通过添加`webkitdirectory`和`mozdirectory`属性，使得用户可以选择一个文件夹。当文件选择完成后，`getFiles`方法会被触发，将选定的文件添加到Vue实例的数据属性`files`中。 ```html <template> <input @change="getFiles($event)" style="width:220px" name="files" type="file" multiple="multiple"/> <input @change="getFiles($event)" style="width:220px" name="files" type="file" webkitdirectory mozdirectory/> <el-button @click="uploadFile" type="submit">上传</el-button> </template> ``` `getFiles`方法遍历选定的文件，并将其存储在`files`数组中。然后，`uploadFile`方法负责将文件数据封装到`FormData`对象中，每个文件作为`files`字段的键值对添加，最后通过调用`upload`函数（这里假设是发送HTTP请求的函数）将文件发送到后端。 ```javascript data() { methods: { getFiles(event) { var files = event.target.files; for (var i = 0; i < files.length; i++) { this.files.push(files[i]); } }, uploadFile() { var formData = new FormData(); for (var i = 0; i < this.files.length; i++) { formData.append('files', this.files[i]); } // 调用上传文件接口 upload(formData).then(response => { if (response.code === 200) { this.msgSuccess("上传成功！"); } }) }, } } ``` 对于后端，Spring Boot提供了处理文件上传的API。通常，你需要创建一个Controller方法，使用`MultipartFile`参数来接收上传的文件。例如： ```java import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; @PostMapping("/upload") public ResponseEntity<String> handleFileUpload(@RequestParam("files") MultipartFile[] files) { // 处理文件上传逻辑 // ... return ResponseEntity.ok("文件上传成功"); } ``` （二）、下载文件 在Spring Boot后端，一旦文件被保存在服务器上，你可以创建一个Controller方法来提供文件的下载。这个方法通常会返回一个`ResponseEntity`，包含文件的内容和适当的HTTP头，如`Content-Disposition`来指示浏览器以下载方式打开文件。 ```java @GetMapping("/download") public ResponseEntity<InputStreamResource> downloadFile(String fileName) { // 获取文件并转换为InputStreamResource InputStreamResource resource = getFileFromServer(fileName); return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileName + "\"") .body(resource); } ``` 在Vue.js前端，可以使用`axios`或`fetch`等库来发起一个GET请求，获取文件并触发浏览器的下载。例如： ```javascript axios.get('/download', { responseType: 'blob', // important }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.pdf'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }); ``` 总结来说，该资源涵盖了Vue.js前端和Spring Boot后端之间文件上传与下载的基本实现步骤，对于开发涉及文件操作的应用非常有帮助。在实际项目中，还需要考虑错误处理、权限验证、文件大小限制、存储策略等其他细节。