SpringBoot+Vue如何实现文件上传下载功能？

本文共计1038个文字，预计阅读时间需要5分钟。

本文以家庭分享为例，介绍了Spring Boot + Vue实现文件上传下载的具体代码，供大家参考。主要包括以下内容：

一、文件上传（基于axios的简单上传）

技术：axios、Spring Boot、Vue

实现思路：通过axios发送请求，将文件数据以FormData形式传输到后端。

代码示例：

1. Vue前端代码：

javascript// 引入axiosimport axios from 'axios';

// 文件上传方法function uploadFile(file) { let formData=new FormData(); formData.append('file', file); axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response=> { console.log('上传成功', response.data); }) .catch(error=> { console.error('上传失败', error); });}

// 调用上传方法uploadFile(file);

2. Spring Boot后端代码：

java// 引入MultipartFileimport org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;

@RestControllerpublic class FileUploadController {

@PostMapping(/upload) public String uploadFile(@RequestParam(file) MultipartFile file) { // 处理文件上传逻辑 // ... return 上传成功; }}

二、文件下载

技术：axios、Spring Boot、Vue

实现思路：通过axios发送请求，获取文件流并保存到本地。

代码示例：

1. Vue前端代码：

javascript// 文件下载方法function downloadFile(url) { axios({ url: url, method: 'get', responseType: 'blob' // 返回文件流 }) .then(response=> { const url=window.URL.createObjectURL(new Blob([response.data])); const link=document.createElement('a'); link.href=url; link.setAttribute('download', 'filename'); // 设置下载文件名 document.body.appendChild(link); link.click(); document.body.removeChild(link); }) .catch(error=> { console.error('下载失败', error); });}

// 调用下载方法downloadFile('http://example.com/file');

2. Spring Boot后端代码：

java// 引入Resourceimport org.springframework.core.io.Resource;import org.springframework.core.io.UrlResource;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.servlet.support.ServletUriComponentsBuilder;

@RestControllerpublic class FileDownloadController {

@GetMapping(/download/{filename}) public Resource downloadFile(@PathVariable String filename) { // 获取文件路径 String fileStorageLocation=fileStorageLocation/ + filename; Resource resource=new UrlResource(fileStorageLocation); if (resource.exists()) { return resource; } else { throw new RuntimeException(Failed to load file: + filename); } }}

本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下

一、文件上传（基于axios的简单上传）

所使用的技术：axios、springboot、vue;
实现思路：通过h5 ：input元素标签进行选择文件，获取所选选择的文件路径，new fromdata对象，设置fromdata的参数，设置axios对应的请求头，最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下：

前端代码：

1、创建vue对象

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import 127.0.0.1:8081/data/up", param, config) .then(response => { console.log(response.data); }).catch( error=>{ alert("失败"); } ); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> </style>

后端代码：

上传文件代码

@RequestMapping(value = "/up", method = RequestMethod.POST) @ResponseBody public Result<String> uploade(@RequestParam("file") MultipartFile file) { try { log.error("开始上传！！！"); String originalFilename = file.getOriginalFilename(); InputStream inputStream = file.getInputStream(); String path="d:/2020test/"; File file1 = new File(path + originalFilename); if(!file1.getParentFile().exists()){ file1.getParentFile().mkdirs(); } file.transferTo(file1); log.info("上传成功！"); } catch (IOException e) { e.printStackTrace(); } Result<String> stringResult = new Result<String>(); stringResult.setMsg("sue"); stringResult.setData("file"); return stringResult; }

二、文件下载

通过response输出流返回文件内容，核心代码设置下载文件的名字（res.setHeader(“Content-Disposition”, “attachment;filename=” + java.net.URLEncoder.encode(realFileName.trim(), “UTF-8”));）

@RequestMapping(value = "/get", method = RequestMethod.GET) public void downloadFile(HttpServletResponse res) { String realFileName="C:/Users/xiongyi/Desktop/12.xls"; File excelFile = new File(realFileName); res.setCharacterEncoding("UTF-8"); res.setHeader("content-type", "application/octet-stream;charset=UTF-8"); res.setContentType("application/octet-stream;charset=UTF-8"); //加上设置大小下载下来的.xlsx文件打开时才不会报“Excel 已完成文件级验证和修复。此工作簿的某些部分可能已被修复或丢弃” // res.addHeader("Content-Length", String.valueOf(excelFile.length())); try { res.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(realFileName.trim(), "UTF-8")); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } byte[] buff = new byte[1024]; BufferedInputStream bis = null; OutputStream os = null; try { os = res.getOutputStream(); bis = new BufferedInputStream(new FileInputStream(new File(realFileName))); int i = bis.read(buff); while (i != -1) { os.write(buff, 0, buff.length); os.flush(); i = bis.read(buff); } } catch (IOException e) { e.printStackTrace(); } finally { if (bis != null) { try { bis.close(); } catch (IOException e) { } } } Result<String> stringResult = new Result<String>(); stringResult.setMsg("sue"); stringResult.setData("nimabi"); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。