springboot整合vue实现上传下载文件

"SpringBoot整合Vue实现上传下载文件" SpringBoot是一款流行的Java框架，Vue是一款流行的前端框架。在实际开发中，我们经常需要实现文件的上传和下载操作。今天，我们将详细介绍如何使用SpringBoot整合Vue实现上传下载文件。 SpringBoot文件上传 在SpringBoot中，文件上传可以使用MultipartFile来实现。MultipartFile是一个接口，定义了文件上传的相关方法。下面是一个简单的文件上传示例： ```java @RestController @RequestMapping("/file") public class FileController { private static final Logger logger = LoggerFactory.getLogger(FileController.class); private final static String fileDir = "files"; private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; @RequestMapping("/upload") public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){ // 文件上传逻辑 } } ``` 在上面的代码中，我们使用了@RestController注解来标识这是一个RESTful API。@RequestMapping("/file")注解指定了该控制器处理的URI prefix是"/file"。uploadFile方法将处理文件上传请求，multipartFiles参数是文件上传的数组。 文件下载 在SpringBoot中，文件下载可以使用HttpServletResponse来实现。下面是一个简单的文件下载示例： ```java @RequestMapping("/download") public void downloadFile(@RequestParam("fileName") String fileName, HttpServletResponse response) throws IOException { String storagePath = rootPath + fileName; File file = new File(storagePath); if (file.exists()) { response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\""); OutputStream outputStream = response.getOutputStream(); FileInputStream fileInputStream = new FileInputStream(file); byte[] buffer = new byte[1024]; int len; while ((len = fileInputStream.read(buffer)) > 0) { outputStream.write(buffer, 0, len); } fileInputStream.close(); } else { response.setStatus(HttpServletResponse.SC_NOT_FOUND); } } ``` 在上面的代码中，我们使用了@RequestMapping("/download")注解来指定该方法处理的URI是"/download"。downloadFile方法将处理文件下载请求，fileName参数是要下载的文件名。我们使用HttpServletResponse来设置文件下载的响应头，并使用OutputStream来写入文件内容。 Vue前端实现 在Vue中，我们可以使用axios库来实现文件上传和下载。下面是一个简单的示例： ```javascript <template> <div> <input type="file" @change="handleFileChange" /> <button @click="handleUpload">上传文件</button> <a :href="downloadUrl" download="文件下载">下载文件</a> </div> </template> <script> export default { data() { return { file: null, downloadUrl: '' } }, methods: { handleFileChange(event) { this.file = event.target.files[0]; }, handleUpload() { const formData = new FormData(); formData.append('file', this.file); axios.post('/file/upload', formData).then(response => { console.log(response); }); }, handleDownload() { axios.get('/file/download', { params: { fileName: '新建文本文档.txt' }, responseType: 'arraybuffer' }).then(response => { const blob = new Blob([response.data], { type: 'application/octet-stream' }); this.downloadUrl = URL.createObjectURL(blob); }); } } } </script> ``` 在上面的代码中，我们使用了axios.post方法来实现文件上传，并使用axios.get方法来实现文件下载。我们还使用了Blob对象来创建文件下载的URL。 我们可以使用SpringBoot和Vue来实现文件上传和下载功能。这两个框架可以很好地结合在一起，提供一个完整的文件上传和下载解决方案。