Spring Boot - XMLHttpRequest Upload（上传文件，非前后端分离）
16lz
2021-04-22
目录
- 项目
- 参考
项目
新建 Spring Starter Project，编辑 pom.xml 文件，引入依赖：
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.3.RELEASE</version> <relativePath /> <!-- lookup parent from repository --> </parent> <groupId>com.mk</groupId> <artifactId>spring-boot-XMLHttpRequest-upload</artifactId> <version>1.0.0</version> <name>spring-boot-XMLHttpRequest-upload</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-configuration-processor</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> <!-- Commons IO --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-configuration-processor</artifactId> </exclude> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build></project>
编辑 application.yml 文件，设置上传文件的大小限制：
spring: servlet: multipart: max-file-size: 200MB max-request-size: 1000MB
IndexController 控制器：
package com.mk.controller;import java.io.File;import java.io.IOException;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controllerpublic class IndexController { @GetMapping({"", "/index"}) public String index() { return "index"; } @PostMapping("/upload") @ResponseBody public String upload(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file, String filename) throws IllegalStateException, IOException { String authorization = request.getHeader("Authorization"); System.out.println(authorization); String originalFilename = file.getOriginalFilename(); file.transferTo(new File("G:/20191212", originalFilename)); return filename; }}src/main/resources/templates/index.html 文件：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Using XMLHttpRequest</title> </head> <body> <input type="file" accept="*.*" /> <script type="text/javascript"> window.onload = (event) => { const DONE = 4 const input = document.querySelector('input[type=file]') input.onchange = (event) => { const files = event.target.files if (files.length > 0) { const file = files[0] console.log(file) const formData = new FormData() formData.append('filename', file.name) formData.append('file', files[0]) const xhr = new XMLHttpRequest() xhr.addEventListener("load", function(event) {// console.log(event) if (xhr.readyState == DONE && xhr.status == 200) { console.log(xhr) console.log(xhr.response) } }) xhr.open("POST", "/upload", true) xhr.responseType = 'text' xhr.setRequestHeader('Authorization', '1234567890') xhr.send(formData) } } } </script> </body></html>更多相关文章
- Spring Boot - axios upload file（带请求头上传文件，非前后端分离）
- CSDN的编辑技巧
- 优盘文件或目录损坏且无法读取怎么办 ，文件或目录损坏且无法读取
- 第二周(第十天)练习题 2018年4月1日 16:45:20
- rsync服务
- 其他空间类的引用，别名引用，自动加载类，数据库的简单操作
- 磁盘空间空间不足的原因及表现与解决办法
- PDF Password Remover 软件及其密钥
- 云计算第一阶段学习汇总