SpringBoot 2.0 图片上传(支持批量上传)-CSDN博客

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

异常

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的配置文件中自定义一下这些属性，我这里是这样配置的。

配置文件更改

详细讲解

图片上传

文件选择

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

OSS控制台