`
gwj41
  • 浏览: 99315 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Angular 4 上传多个文件到Spring boot

 
阅读更多

现在很多项目都使用前后端分离来实现,前后端通过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应该也可以

 

 

0
0
分享到:
评论

相关推荐

    spring boot 全套示例框架源码 几十套

    在描述中提到的多个技术点,我们逐一深入探讨: 1. **前端与后端分离**:在现代Web开发中,前端通常使用React、Vue或Angular等库或框架,与后端服务通过RESTful API进行通信。Vue.js 是一个轻量级的前端MVVM框架,...

    一个基于Spring boot+mybatis客户管理系统

    总的来说,"基于Spring Boot+MyBatis的CRM客户管理系统"是一个全面的实践案例,它涵盖了后端开发的多个重要方面,包括框架集成、数据库操作、API设计、模块化开发等。对于Java开发者来说,深入学习并理解这个项目,...

    Spring Boot技术栈博客企业前后端.txt

    4. **安全性**:Spring Security是一个强大的安全框架,Spring Boot通过集成该框架为应用程序提供了简单易用的安全性支持。 ### 微服务架构下的前后端通信 在微服务架构中,前后端之间的通信变得更加重要。通常...

    spring boot+shiro+mybatis实现不同用户登录显示不同的权限菜单

    1. **配置Shiro**:首先需要在Spring Boot的配置文件中引入Shiro的相关配置,包括 Realm(自定义的权限认证类),以及过滤器链的定义,确保Shiro能正确拦截请求并进行权限校验。 2. **设计数据库表**:创建用户表、...

    spring boot音乐网站源码

    综上所述,这个"spring boot音乐网站源码"项目涵盖了Spring Boot的基本使用、Web开发、数据库操作、前端页面设计等多个方面,对于学习和实战Spring Boot技术具有很高的参考价值。通过深入研究和修改这个项目,开发者...

    spring boot 集成框架事例

    综上所述,Spring Boot的集成框架能力涵盖了Web开发、数据库操作、微服务、消息队列、安全和监控等多个方面,大大提升了开发效率。通过`H5DSWEB`这个例子,我们可以学习到如何在Spring Boot项目中整合H5前端技术和...

    Java毕业设计——基于spring boot的疫情数据查看网站设计与实现(源码+数据库).7z

    本项目是一个Java毕业设计,...总的来说,这个Java毕业设计项目涵盖了Web开发的多个方面,包括后端编程、数据库设计、API接口、前端可视化等,对于学习和掌握Spring Boot框架及其相关的Web开发技术具有很好的实践意义。

    【Java毕业设计】java 基于Spring Boot2.X的后台权限管理系统,适合于学习Spring Boot开.zip

    【Java毕业设计】基于Spring Boot2.X的后台权限管理系统是一个典型的Web应用开发项目,它旨在帮助学生或开发者熟悉和掌握Spring Boot的核心特性和在实际项目中的应用。Spring Boot以其简化配置、快速启动和丰富的...

    基于 Spring Boot 的在线 Java IDE.zip

    4. **编译与运行**:集成 Maven 或 Gradle 进行代码编译,然后利用 JVM 的多线程能力来并行执行多个任务。 5. **版本控制**:考虑集成 Git,让用户能够保存和恢复他们的代码版本。 6. **错误处理与日志**:使用 ...

    Spring Boot框架实现网页端电子商务平台

    通过以上分析,我们可以看出这个项目利用了 Spring Boot 的强大功能来构建一个完整的电子商务平台,覆盖了用户管理、商品展示、购物车、数据库交互等多个关键模块,展现了 Spring Boot 在 Web 开发领域的高效和便利...

    Spring Boot 微信点餐系统.docx

    【Spring Boot 微信点餐系统】是一个使用Spring Boot框架构建的应用,旨在实现一个基于微信的在线点餐功能。这个系统采用了前后端分离的架构,前端负责用户界面和交互,后端则处理业务逻辑和数据存储。以下是关于该...

    spring boot

    Spring Boot是Java领域一个革命性的框架,由Pivotal团队创建,旨在简化Spring应用程序的初始设置和常规配置,使得开发者可以更快地构建高质量的应用。它通过自动配置、起步依赖和命令行工具等特性,极大地提高了开发...

    angular+springmvc+mongodb

    - **分片**:当数据量过大时,MongoDB 可以通过分片技术将数据分散到多个节点上,实现数据的分布式存储。 在实际项目中,Angular 负责用户界面和交互,Spring MVC 处理后端业务逻辑和提供 REST API,而 MongoDB ...

    基于Spring Boot的云上水果超市的设计与实现lw+ppt.rar

    总结来说,基于Spring Boot的云上水果超市设计与实现涵盖了系统架构、数据库设计、业务逻辑、前端交互、安全性、部署及监控等多个层面。通过合理运用这些技术,我们可以构建出稳定、高效的线上水果销售平台,满足...

    Spring Boot带前后端 渐进式开发企业级博客系统源码

    总之,这个项目涵盖了Spring Boot的多个核心特性和相关技术,提供了一个实际的、前后端分离的企业级博客系统示例,有助于开发者学习和实践Spring Boot在实际项目中的应用。通过逐步学习和实践,开发者可以提升其在...

    cc-project:一个Angular + Spring Boot前一级分离基础权限框架

    vue版本请访问一个Angular + Spring Boot前一级分离基础权限框架相关说明: 1.前端:angular+ng-zorro-antd+less+各种组件2.后端:spring boot+mybatis3.1.1 + maven模块化3.数据库:mysql8.0以上(需要低版本的可...

    school-interests:Spring Boot Angular应用程序

    6. **部署**:将Spring Boot应用部署到服务器,Angular应用通过构建生成的静态资源部署到Spring Boot的静态资源目录下,或者单独部署到静态文件服务器。 总结,Spring Boot Angular应用程序结合了Spring Boot的高效...

    Angular2-Spring-Boot-CRUD:使用Angular2,Spring Boot和Spring安全性进行CRUD的迷你项目,以了解有关angular和spring的更多信息

    Angular2-Spring-Boot-CRUD 该项目是CRUD Spring Boot静态API Angular 2和MySql。 它包含ClientProject-SpringBoot中的Spring代码,ClientProject-Angular中的Angular2代码和数据库的MySql代码三部分。 春天 Sprint...

    基于 Spring boot 的个人博客系统设计与实现(源码+数据库).zip

    【标题】"基于 Spring Boot 的个人博客系统设计与实现"是一个综合性的项目,它涵盖了现代Web开发中的多个关键技术和最佳实践。Spring Boot是Java领域的一个流行框架,它简化了Spring应用的初始设置和配置,使得...

    SpringBoot实现文件上传系统.zip

    综上所述,这个项目涵盖了Spring Boot应用的基础结构、文件上传的实现、安全控制、错误处理等多个方面,是一个全面展示Spring Boot技术栈的实例。通过这个项目,开发者可以学习到如何构建一个完整的文件管理系统,并...

Global site tag (gtag.js) - Google Analytics