SpringBoot 2.0 图片上传(支持批量上传)

简介: SpringBoot 2.0提供了很多开箱即用的功能,这使得我们开发也更加的简单。下面是一个图片上传的Demo(包含前端代码与后端的代码)Web端代码,支持批量上传 File upload upload var length; $("#file").

SpringBoot 2.0提供了很多开箱即用的功能,这使得我们开发也更加的简单。
下面是一个图片上传的Demo(包含前端代码与后端的代码)

Web端代码,支持批量上传
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>File upload</title>
    <script src="../static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="uploadForm">
    <input id="file" type="file" multiple/>
    <button id="upload" type="button" onclick="getUpload()">upload</button>
</div>
<script type="text/javascript">
    var length;
    $("#file").change(function () {
        length = this.files.length;
        console.log(length);
    })

    function getUpload(){
        var formData = new FormData();
        var arr=new Array();
        var container;
        var i=0;
        for(let i=0;i<length;i++){
            formData.append('file', $('#file')[0].files[i]);
            console.log(formData.get("file"));
        }
        container=formData.getAll("file");
        for (var item in container) {
            arr[i] = container[item];
            i++;
        }
        console.log(arr);
        $.ajax({
            url: '/pic',
            type: 'POST',
            dataType:"json",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success:(function(data) {
                window.confirm(data.code)
            }),
            error:(function(res) {
                alert("失败");
            })
        });
    }
</script>
</body>
</html>

Controller 层参数接收

@RequestMapping("/pic")
    @ResponseBody
    public BaseResponse uplodFile(@RequestParam("file") MultipartFile[] file) throws Exception {
        /*String originalFilename = file.getOriginalFilename();
        FileInputStream inputStream = (FileInputStream) file.getInputStream();*/
       /* System.out.println(inputStream);
        System.out.println(originalFilename);*/

        System.out.println("数组的长度"+file.length);
        for (int i = 0; i < file.length; i++) {
            String originalFilename = file[i].getOriginalFilename();
            InputStream inputStream = file[i].getInputStream();
            OSSUtil.uploadImageToOSS(originalFilename, inputStream);
        }
        return BaseResponse.ok(200,"OK");
    }

关于会遇见的Exception

img_f2a33434f7b788383f736e59141155a8.png
异常
org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.
    at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl$FileItemStreamImpl$1.raiseError(FileUploadBase.java:630)
    at org.apache.tomcat.util.http.fileupload.util.LimitedInputStream.checkLimit(LimitedInputStream.java:76)
    at org.apache.tomcat.util.http.fileupload.util.LimitedInputStream.read(LimitedInputStream.java:135)
    at java.io.FilterInputStream.read(FilterInputStream.java:107)
    at org.apache.tomcat.util.http.fileupload.util.Streams.copy(Streams.java:98)
    at org.apache.tomcat.util.http.fileupload.util.Streams.copy(Streams.java:68)
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:293)

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.
根据异常信息可以看出是因为我们单次上传的文件的大小超过了 1048576bytes 也就是超过了1MB的大小。这是因我SpringBoot2.0的默认配置是1MB的小大,所以这个时候我们需要在SpringBoot的配置文件中自定义一下这些属性,我这里是这样配置的。

img_7e4dd5779aca48c425c572b24361aa97.png
配置文件更改

详细讲解

img_b25e70251a397b69c62cd0a025e265ff.png
图片上传
img_4864936346ac9ad1893746ddcb03fc7d.png
文件选择
img_b3b64e930400bcba567f63a74074dd72.png
文件选择
public interface MultipartFile extends InputStreamSource {
    String getName();

    @Nullable
    String getOriginalFilename();

    @Nullable
    String getContentType();
....

我们的代码

 @RequestMapping("/pic")
    @ResponseBody
    public BaseResponse uplodFile(@RequestParam("file") MultipartFile[] file) throws Exception {
.....

通过查看MultipartFile继承了InputStreamSource那么传递给我们的最重要的信息就是我们卡伊拿到文件流了InputStream inputStream = file[i].getInputStream();
那么所有问题就迎刃而解了。
我们使用的阿里的OSS对象存储,代码中使用的OSSUtils我在之前的代码中也贴出过相应的代码传送门:https://www.jianshu.com/p/2e419be10729

img_73028b1f7c6ffc4b74b0a92580cd16fb.png
OSS控制台
目录
相关文章
|
存储 Java API
如何在Spring Boot应用程序中使用华为云的OBS云存储来上传和删除图片?
如何在Spring Boot应用程序中使用华为云的OBS云存储来上传和删除图片?
339 1
|
Java Maven
springboot项目--freemarker使用ftl模板文件动态生成图片
springboot项目--freemarker使用ftl模板文件动态生成图片
786 0
|
4月前
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
|
4月前
|
机器学习/深度学习 文字识别 前端开发
基于 Spring Boot 3.3 + OCR 实现图片转文字功能
【8月更文挑战第30天】在当今数字化信息时代,图像中的文字信息越来越重要。无论是文档扫描、名片识别,还是车辆牌照识别,OCR(Optical Character Recognition,光学字符识别)技术都发挥着关键作用。本文将围绕如何使用Spring Boot 3.3结合OCR技术,实现图片转文字的功能,分享工作学习中的技术干货。
209 2
|
4月前
|
Java Spring
Spring boot +Thymeleaf 本地图片加载失败(图片路径)的问题及解决方法
这篇文章详细讲解了在Spring Boot应用程序中本地图片无法加载的问题原因,并提供了两个示例来说明如何通过使用正确的相对路径或Thymeleaf语法来解决图片路径问题。
|
4月前
|
前端开发 JavaScript Java
Spring boot 本地图片不能加载(图片路径)的问题及解决方法
这篇文章讨论了Spring Boot应用程序中本地图片无法加载的问题,通常由图片路径不正确引起,并提供了使用正确的相对路径和Thymeleaf语法来解决这一问题的两种方法。
|
5月前
|
文字识别 Java Spring
文本,文字识别,SpringBoot服务开发,SpringBoot如何提供上传服务,接口的设计,它做了将Base64重新转为图片,SpringBoot的应用实例,项目基础搭建
文本,文字识别,SpringBoot服务开发,SpringBoot如何提供上传服务,接口的设计,它做了将Base64重新转为图片,SpringBoot的应用实例,项目基础搭建
|
5月前
|
前端开发 Java 网络架构
SpringBoot使用接口下载图片的写法
在Spring Boot中实现图片下载功能涉及定义一个REST接口来发送图片文件。首先,创建`ImageController`类,并在其中定义`downloadImage`方法,该方法使用`@GetMapping`注解来处理HTTP GET请求。方法内部,通过`Files.readAllBytes`读取图片文件到字节数组,再将该数组封装成`ByteArrayResource`。接着,设置`HttpHeaders`以指定文件名为`image.jpg`并配置为附件下载。
240 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
47 0
|
6月前
|
XML JSON Java
图文并茂:解析Spring Boot Controller返回图片的三种方式
图文并茂:解析Spring Boot Controller返回图片的三种方式
559 0