VUE+SpringBoot文件上传与下载

最新推荐文章于 2025-02-27 12:39:40 发布
最新推荐文章于 2025-02-27 12:39:40 发布
阅读量891 收藏 1
点赞数
分类专栏： 工作问题解决
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hou956643882/article/details/117425038
版权
本文介绍了如何在Vue与SpringBoot应用中使用antd的a-upload组件进行文件上传，强调了二进制流处理和Content-Type设置的重要性，并提供了下载文件的后端处理方法，包括数组接收和压缩文件的建议。还讨论了ArrayBuffer和Blob的区别及其在下载操作中的运用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景

使用VUE+SpringBoot实现文件的上传与下载，使用antd的a-upload作为上传按钮（样式），遇到了问题，这里记录一下。

上传

  • 文件在上传时，通过formData.append拼接字段，注意红框部分，这里的file最后是一个二进制流，不要把一个file对象传过去，不然后端的MultipartFile接收不到
  • 上传这里需要注意，我们的Content-type需要写成multipart/form-data ，否则application/json（序列化后的 JSON 字符串），application/x-www-form-urlencoded（浏览器默认，原生 form 表单）
  • 如果是多个文件的上传，不要传file数组或二进制数组！！！否则后端接收不到值，如果有这种需求，可以继续append，key可以重复，value不会覆盖，后端使用数组来接收。

下载

  • 后端的下载这里简单说一下：首先是通过response拿到输出流对象，然后写入response中。上图来自网站：https://blog.youkuaiyun.com/javaloveiphone/article/details/8133772，作者：逍遥不羁

  • 如果到下载多个文件，建议打成一个zip文件或多次调用下载文件接口

  • 前端这里的responseType要写成arraybuffer，我们会拿到一个ArrayBuffer的返回值，根据该对象创建一个Blob对象，创建一个不可见的超链接，链接地址是根据Blob创建的URL，模拟点击然后再删除改超链接

  • ArrayBuffer和Blob区别如下（来自：https://blog.youkuaiyun.com/weixin_41849462/article/details/103409341 作者：张贺_）

二进制流文件上传下载( springboot+vue).html
04-13
采用springboot + vue的技术模式，实现了文件的上传和下载，在页面上跟简洁直观的体现，在代码中也是少量代码实现复杂功能。
springboot+vue实现文件上传下载
01-18
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下 一、文件上传（基于axios的简单上传） 所使用的技术：axios、springboot、vue; 实现思路：通过h5 ：input元素标签进行选择文件，获取所选选择的文件路径，new fromdata对象，设置fromdata的参数，设置axios对应的请求头，最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下： 前端代码： 1、创建vue对象 import Vue from 'vue' import App from './Ap
Spring Boot 实战：轻松实现文件上传与下载功能
最新发布
rgrgrwfe的博客
02-27 912
目录一、引言二、Spring Boot 文件上传基础（一）依赖引入（二）配置文件设置（三）文件上传接口编写（一）文件类型限制（二）文件大小验证（三）防止文件覆盖四、Spring Boot 文件下载实现（一）简单文件下载接口编写（二）文件下载的异常处理（三）支持断点续传五、实战案例演示六、总结与展望在当今的 Web 应用开发中，文件上传与下载功能是极为常见且重要的需求。无论是用户上传头像、分享文档，还是系统生成报告供用户下载，都离不开这一功能模块。Spring Boot 作为一款流行的 Java 开发框架，为
Vue调用SpringBoot后台实现文件下载功能
04-02
该案例实现前端Vue通过axios请求SpringBoot后台，实现文件下载功能。 filepack ： 前端项目 8081端口。 fileServer： 后端项目 8080端口。
axios请求封装
为技术而生
06-27 444
axios请求封装
vue+Springboot实现文件下载
m0_73463767的博客
08-20 1006
【代码】vue+Springboot实现文件下载。
vue+springboot 大文件上传
01-23
在大文件上传方面，SpringBoot 提供了支持文件上传的API，我们可以利用这些API来处理文件接收和存储。 ### 分片上传 大文件分片上传是一种优化策略，通过将大文件拆分为多个小块（片段）进行上传，然后在服务器端...
Vue+SpringBoot+SpreadJS 实现的在线文档功能.docx
07-12
后端使用 SpringBoot 处理文件的上传、下载和存储。SpringBoot 提供了方便的数据持久化支持，可以通过集成数据库或文件系统来存储在线文档。在控制器中，我们可以设置接口来处理文件的 GET 和 POST 请求，以便前端...
vue+springboot图片上传和显示的示例代码
11-21
在使用spring boot做后台系统，vue做前端系统，给客户开发一套系统时候，其中用到了图片上传和显示的功能。 二、环境 前端：vue 前端组件：tinymce 后台：spring boot:2.2.3 三、正文 在客户开发一套门户管理...
基于Vue+Springboot+LayUI前后端分离农作物数据共享平台设计+源代码+文档说明+sql文件
11-12
基于Vue+Springboot+LayUI前后端分离农作物数据共享平台设计 开发软件：Idea,Vscode可以选，mysql 开发技术：Springboot + Vue + LayUI,前后端分离 用户的功能包括注册和登录，选播查询、技术查询、种子供应商和农...
vue+springboot使用文件流实现文件下载
xc9711的博客
10-24 9863
本次将使用vue和springboot通过文件流的方式教大家怎么去实现文件的下载
springboot整合vue实现上传下载文件
08-25
主要为大家详细介绍了springboot整合vue实现上传下载文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-15
基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统，拥有简洁漂亮的界面，实现了G级别文件极速上传下载，断点续传以及秒传功能
SpringBoot+Vue
07-24
SpringBoot+Vue 实现的前后端分离技术，感谢代码技术的编写者，看了之后学到了很多，建议可以看看。Vue是建立在node.js环境搭好的情况下运行，里面有一个自己整理的Vue环境搭建文档，希望可以帮到，有什么问题望大家告知，一起学习
springboot+vue.rar
08-10
这是关于springboot+vue前后端分离的入门级项目，前端使用了vue框架，后端使用了springboot+mybatis+mysql+shiro，前端包含四个页面，包括首页，笔记本，图书页面的增删改查功能，后台页面，其中后台页面只有页面，具体的逻辑没有实现。
springboot结合vue的文件上传下载
我的博客
10-22 367
springgboot + elementui文件上传下载
二进制流文件上传下载( springboot+vue)
yangli05287506的博客
04-13 1817
一、springboot + vue文件下载 1、后端代码 @RequestMapping(value="singleDocumentDownload", method = RequestMethod.POST) public void download(HttpServletResponse response, @RequestBody Map<String, Object> m...
vue+springboot实现文件下载
ChenJin_2的博客
04-17 374
vue+springboot实现文件下载
springboot vue下载文件
choucongyi6778的博客
08-23 1122
最近碰到下载一个后端生成的文件问题，前端是使用Vue写的前后端分离。 最开始使用post请求，跨域问题，前端接受问题乱七八糟的问题，就改成get方式传值。思想就是生成一个文件，前端通过一个链接进来下载。 1、前端代码 detailDown() { const param = '?a...
vue+springboot文件上传和下载
12-27
### 使用 Vue 和 Spring Boot 实现文件上传和下载 #### 文件上传部分 为了实现文件上传的功能，前端使用 Vue.js 来构建用户界面，并通过 HTTP 请求将文件发送给后端服务器。而后端则采用 Spring Boot 接收这些请求并将文件存储起来。 ##### 前端代码示例（Vue） 在 Vue 中可以通过 `axios` 库发起 POST 请求来提交表单数据以及文件流： ```javascript import axios from 'axios'; export default { methods: { async submitFile() { const formData = new FormData(); formData.append('file', this.selectedFile); try { await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); console.log('Upload successful'); } catch (error) { console.error('There was an error uploading the file!', error); } }, handleFileSelect(event){ this.selectedFile = event.target.files[0]; } } } ``` 此段脚本定义了一个名为 `submitFile()` 的方法用于处理文件的选择与上传操作[^1]。 ##### 后端代码示例（Spring Boot） 对于接收文件的部分，在控制器类中声明一个映射路径 `/upload` 并设置其支持 POST 方法。当有新的文件被上传时会触发该接口下的函数执行相应的业务逻辑： ```java @RestController @RequestMapping("/api") public class FileUploadController { @PostMapping("/upload") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) throws IOException { if(file.isEmpty()){ return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Please select a file to upload."); } // Save uploaded file on server... Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename()); Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return ResponseEntity.ok("You successfully uploaded '" + file.getOriginalFilename() + "'"); } } ``` 这段 Java 代码片段展示了如何创建 RESTful API 来接受来自客户端的多部件形式的数据包，并将其保存至指定位置上[^2]。 #### 文件下载部分 同样地，要让应用程序能够响应用户的下载请求也需要前后两端共同协作完成这项工作。 ##### 前端代码示例（Vue） 为了让用户可以从浏览器获取远程资源，可以在组件内部编写如下所示的方法调用： ```javascript async downloadFile(filename) { try{ let response = await fetch(`/api/download/${filename}`); const blob = await response.blob(); var link=document.createElement('a'); link.href=URL.createObjectURL(blob); link.download = filename; document.body.appendChild(link); link.click(); URL.revokeObjectURL(link.href); document.body.removeChild(link); }catch(error){ console.error('Error during downloading:', error.message); } }, ``` 上述 JavaScript 函数负责向特定地址发出 GET 请求以取得目标二进制对象，之后再利用 HTML5 提供的新特性自动弹出另存对话框让用户选择保存地点[^4]。 ##### 后端代码示例（Spring Boot） 最后一步是在服务层准备好可供访问的目标实体及其元信息以便于返回给调用者： ```java @GetMapping("/download/{fileName:.+}") @ResponseBody public FileSystemResource getFile( @PathVariable String fileName, HttpServletResponse response) throws Exception { Path filePath = Paths.get(DOWNLOAD_PATH + "/" + fileName); if (!Files.exists(filePath)) { throw new FileNotFoundException(fileName + " not found on server"); } response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE); response.setHeader(HttpHeaders.CONTENT_DISPOSITION,"attachment; filename=\"" + URLEncoder.encode(fileName,StandardCharsets.UTF_8.toString())+"\""); return new FileSystemResource(filePath.toFile()); } ``` 这个处理器用来匹配所有形如 `/download/*` 的 URI 模式，并尝试读取对应的磁盘上的实际文件作为回应的一部分传回给客户机。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值