SpringBoot文件上传（单文件）

最新推荐文章于 2024-03-22 15:49:23 发布

风中雪x

最新推荐文章于 2024-03-22 15:49:23 发布

阅读量363

点赞数 2

分类专栏： JavaEE 文章标签： java ajax

本文链接：https://blog.csdn.net/weixin_45959458/article/details/112797915

版权

JavaEE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

SpringBoot文件上传（单文件）

1.简介

1.1文件上传是web应用中最常用的功能之一，这里介绍两种种文件上传的方式：

- 表单上传
- ajax上传（FormData）

2. 后端代码

2.1 创建一个SpringBoot项目，引入web依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.2 上传接口编写(通用写法)

@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String fileUpload(MultipartFile file, HttpServletRequest request) throws IOException {

        String filePath = request.getServletContext().getRealPath("/image");
        File folder = new File(filePath);
        if (!folder.exists()) {
            folder.mkdirs();
        }
        //图片原名称
        String originalFilename = file.getOriginalFilename();
        //使用UUID生成新名称，防止重名覆盖
        String newName = UUID.randomUUID().toString() +         originalFilename.substring(originalFilename.indexOf("."));
        try {
            //将内存中的图片写入磁盘，也可直接使用流的方式写入
            file.transferTo(new File(folder, newName));
            //获取文件的URl,例如：http://localhost:8080/image/pic1.jpg
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/image/" + newName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "error";
    }
}

异常：org.apache.tomcat.util.http.fileupload.impl.FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.

在这里插入图片描述

这个异常的意思是文件大小超出了限制，我们需要设置文件大小。

在配置文件 application.properties中增加如下配置：

spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.max-request-size=1000MB

3.前端代码

方式1：表单上传

要点：

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单方式上传文件</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>
</body>
</html>

方式2：ajax上传（FormData）

表单上传会刷新整个页面，但是很多时候我们并不希望这样，而ajax异步上传可以达到只刷新局部位置，符合大多数的业务场景。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" name="file" id="file">
<button id="btn">上传</button>
<img src="" width="300" alt="" id="img">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var formData = new FormData();
    $("#btn").click(() => {
        //获取文件的对象
        var file = $("#file")[0].files[0];
        formData.append("file", file);
        $.ajax({
            url: "/upload",
            type: "POST",
            data: formData,
            //必须false才会自动加上正确的Content-Type
            contentType: false,
            //必须false才会避开jQuery对 formdata 的默认处理
            //XMLHttpRequest会对formdata 进行正确的处理
            processData: false,
            success: function (data) {
                $("#img").attr('src', data);
            },
            error: function () {
                alert("上传失败！");
            }
        });
    })
</script>
</body>
</html>

构造一个 FormData ，用来存放上传的数据,FormData ，FormData 就是要上传的数据（代码中为file）。
文件上传注意两点：1. 请求方法为 post，2. contentType:设置为false,processData:设置为false。
axios文件上传与此类似

风中雪x

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot文件上传（单文件）

SpringBoot文件上传（单文件）1.简介1.1文件上传是web应用中最常用的功能之一，这里介绍两种种文件上传的方式：- 表单上传- ajax上传（FormData）2. 后端代码2.1 创建一个SpringBoot项目，引入web依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web<
复制链接

扫一扫