现在很多项目都使用前后端分离来实现,前后端通过ajax, restful的httpclient来调用,传输数据,以下是angular上传文件到后端JAVA的例子。
<div> <label for="file">Upload file</label> <input id="file" #file type="file" multiple (change)="upload(file)" /> <span *ngIf="uploadProgress > 0 && uploadProgress < 100"> {{uploadProgress}}% </span> </div>
Typescript代码
upload(file: HTMLInputElement) { const token = localStorage.getItem('token'); let headers: HttpHeaders = new HttpHeaders(); headers = headers .set('Cache-Control', 'no-cache') .set('Authorization', 'Bearer ' + token); if (file.value.length === 0) { return; } const files: FileList = file.files const fileLength = files.length; const formData: FormData = new FormData(); for (let index = 0; index < fileLength; index++) { const singleFile = files.item(index); // files 这个名字和spring mvc controller参数的名字要对应 formData.append('files', singleFile); } // for (let singleFile of files.item) { // formData.append(singleFile.name, singleFile); // } // formData.append('file', file.files[0]); const url = 'http://localhost:8764/api/v1/user/fileUpload'; const req = new HttpRequest('POST', url, formData, { reportProgress: true, headers: headers }); this.http.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { this.uploadProgress = Math.round(100 * event.loaded / event.total); } else if (event instanceof HttpResponse) { console.log('Files uploaded!'); } }); // this.http.post(url, formData, {headers: headers}).subscribe(data => { // console.log(data); // }); }
Spring boot controller
@PostMapping(value = "fileUpload") public ResponseEntity<ResponseMap> fileUpload(@RequestPart List<MultipartFile> files) { if (!CollectionUtils.isEmpty(files)) { files.stream().forEach(file -> { LOGGER.info(file.getOriginalFilename()); LOGGER.info(String.valueOf(file.getSize())); }); } ResponseEntity<ResponseMap> responseEntity = null; ResponseMap responseMap = new ResponseMap(); responseEntity = new ResponseEntity(responseMap, HttpStatus.OK); return responseEntity; }
Controller参数用@RequestParam应该也可以
相关推荐
在描述中提到的多个技术点,我们逐一深入探讨: 1. **前端与后端分离**:在现代Web开发中,前端通常使用React、Vue或Angular等库或框架,与后端服务通过RESTful API进行通信。Vue.js 是一个轻量级的前端MVVM框架,...
总的来说,"基于Spring Boot+MyBatis的CRM客户管理系统"是一个全面的实践案例,它涵盖了后端开发的多个重要方面,包括框架集成、数据库操作、API设计、模块化开发等。对于Java开发者来说,深入学习并理解这个项目,...
4. **安全性**:Spring Security是一个强大的安全框架,Spring Boot通过集成该框架为应用程序提供了简单易用的安全性支持。 ### 微服务架构下的前后端通信 在微服务架构中,前后端之间的通信变得更加重要。通常...
1. **配置Shiro**:首先需要在Spring Boot的配置文件中引入Shiro的相关配置,包括 Realm(自定义的权限认证类),以及过滤器链的定义,确保Shiro能正确拦截请求并进行权限校验。 2. **设计数据库表**:创建用户表、...
综上所述,这个"spring boot音乐网站源码"项目涵盖了Spring Boot的基本使用、Web开发、数据库操作、前端页面设计等多个方面,对于学习和实战Spring Boot技术具有很高的参考价值。通过深入研究和修改这个项目,开发者...
综上所述,Spring Boot的集成框架能力涵盖了Web开发、数据库操作、微服务、消息队列、安全和监控等多个方面,大大提升了开发效率。通过`H5DSWEB`这个例子,我们可以学习到如何在Spring Boot项目中整合H5前端技术和...
本项目是一个Java毕业设计,...总的来说,这个Java毕业设计项目涵盖了Web开发的多个方面,包括后端编程、数据库设计、API接口、前端可视化等,对于学习和掌握Spring Boot框架及其相关的Web开发技术具有很好的实践意义。
【Java毕业设计】基于Spring Boot2.X的后台权限管理系统是一个典型的Web应用开发项目,它旨在帮助学生或开发者熟悉和掌握Spring Boot的核心特性和在实际项目中的应用。Spring Boot以其简化配置、快速启动和丰富的...
4. **编译与运行**:集成 Maven 或 Gradle 进行代码编译,然后利用 JVM 的多线程能力来并行执行多个任务。 5. **版本控制**:考虑集成 Git,让用户能够保存和恢复他们的代码版本。 6. **错误处理与日志**:使用 ...
通过以上分析,我们可以看出这个项目利用了 Spring Boot 的强大功能来构建一个完整的电子商务平台,覆盖了用户管理、商品展示、购物车、数据库交互等多个关键模块,展现了 Spring Boot 在 Web 开发领域的高效和便利...
【Spring Boot 微信点餐系统】是一个使用Spring Boot框架构建的应用,旨在实现一个基于微信的在线点餐功能。这个系统采用了前后端分离的架构,前端负责用户界面和交互,后端则处理业务逻辑和数据存储。以下是关于该...
Spring Boot是Java领域一个革命性的框架,由Pivotal团队创建,旨在简化Spring应用程序的初始设置和常规配置,使得开发者可以更快地构建高质量的应用。它通过自动配置、起步依赖和命令行工具等特性,极大地提高了开发...
- **分片**:当数据量过大时,MongoDB 可以通过分片技术将数据分散到多个节点上,实现数据的分布式存储。 在实际项目中,Angular 负责用户界面和交互,Spring MVC 处理后端业务逻辑和提供 REST API,而 MongoDB ...
总结来说,基于Spring Boot的云上水果超市设计与实现涵盖了系统架构、数据库设计、业务逻辑、前端交互、安全性、部署及监控等多个层面。通过合理运用这些技术,我们可以构建出稳定、高效的线上水果销售平台,满足...
总之,这个项目涵盖了Spring Boot的多个核心特性和相关技术,提供了一个实际的、前后端分离的企业级博客系统示例,有助于开发者学习和实践Spring Boot在实际项目中的应用。通过逐步学习和实践,开发者可以提升其在...
vue版本请访问一个Angular + Spring Boot前一级分离基础权限框架相关说明: 1.前端:angular+ng-zorro-antd+less+各种组件2.后端:spring boot+mybatis3.1.1 + maven模块化3.数据库:mysql8.0以上(需要低版本的可...
6. **部署**:将Spring Boot应用部署到服务器,Angular应用通过构建生成的静态资源部署到Spring Boot的静态资源目录下,或者单独部署到静态文件服务器。 总结,Spring Boot Angular应用程序结合了Spring Boot的高效...
Angular2-Spring-Boot-CRUD 该项目是CRUD Spring Boot静态API Angular 2和MySql。 它包含ClientProject-SpringBoot中的Spring代码,ClientProject-Angular中的Angular2代码和数据库的MySql代码三部分。 春天 Sprint...
【标题】"基于 Spring Boot 的个人博客系统设计与实现"是一个综合性的项目,它涵盖了现代Web开发中的多个关键技术和最佳实践。Spring Boot是Java领域的一个流行框架,它简化了Spring应用的初始设置和配置,使得...
综上所述,这个项目涵盖了Spring Boot应用的基础结构、文件上传的实现、安全控制、错误处理等多个方面,是一个全面展示Spring Boot技术栈的实例。通过这个项目,开发者可以学习到如何构建一个完整的文件管理系统,并...