基于Springboot实现前端文件上传，后端实现文件存储

最新推荐文章于 2024-01-09 23:35:26 发布

差点意思

最新推荐文章于 2024-01-09 23:35:26 发布

阅读量371

点赞数

文章标签： spring boot 前端 java

本文链接：https://blog.csdn.net/Q_W_W_Q/article/details/130405769

版权

1、环境

maven坐标

<?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>
<groupId>com.guo</groupId>
<artifactId>alias</artifactId>
<version>0.0.1-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.10</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<name>alias</name>
<description>alias</description>
<properties>
<java.version>8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</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>
</dependency>
案例⼀、实现前端上传，后端给出存储位置。
前端代码：
<!--mybatis起步依赖-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>

2、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="upFileName"><br>
<input type="submit" value="提交">
</form>
</body>
</html>

3、后端代码

响应类

@AllArgsConstructor
@NoArgsConstructor
@Data
public class Result {
    private Integer code;//响应码，1 代表成功; 0 代表失败
    private String msg; //响应信息 描述字符串
    private Object data; //返回的数据

    public static Result success() {
        return new Result(1, "success", null);
    }

    //查询 成功响应
    public static Result success(Object data) {
        return new Result(1, "success", data);
    }

    //失败响应
    public static Result error(String msg) {
        return new Result(0, msg, null);
    }
}

控制类

@Slf4j
@RestController
public class UpLoadController {
    @PostMapping("/upload")
    public Result upload(@RequestParam("upFileName") MultipartFile file) throws
            Exception {
        log.info("upFileName:{}", file);
        String originalFilename = file.getOriginalFilename();
        file.transferTo(new
                File("/Users/guo/IdeaProjects/MyProject/repo/" + originalFilename));
        return Result.success();
    }
}