SpringBoot文件上传

一、文件上传简介

文件上传，是指我们把本地的文件上传到服务器上，以供其他用户进行访问、下载等操作。在Web应用的开发中，文件上传是一个很需要注意的问题。SpringBoot为我们提供了很好的支持，为我们简化了文件上传的难度。下面分析一下SpringBoot如何实现文件上传。

二、实现文件上传

1.前端表单

在前端页面上，需要设置一个form表单来进行文件上传，这个表单中要设置一个<input type="file">元素，以供用户进行文件选择。

<form action="fileupload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="上传文件" />
</form>

2.Controller层

在Controller层中，需要使用@RequestParam注解来获取文件上传的信息，再使用MultipartFile类来进行文件上传。

@RestController
public class FileUploadController {
    
    @PostMapping("/fileupload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        String fileName = file.getOriginalFilename();
        File destFile = new File("D:/temp/" + fileName);
        try {
            file.transferTo(destFile);
            return "文件上传成功！";
        } catch (IOException e) {
            e.printStackTrace();
            return "文件上传失败！";
        }
    }
}

3.配置文件

在application.properties或application.yml中，需要添加上传文件的大小限制配置和上传文件缓存的配置，以确保能够成功上传文件。

#文件上传大小限制
spring.servlet.multipart.max-file-size=10MB
#设置上传文件临时存储路径
spring.servlet.multipart.location=D:/temp

三、实现文件上传批量处理

1.前端表单

与单文件上传类似，需要设置多个<input type="file">元素，以供用户进行文件选择，注意需要添加multiple属性，才能够同时选择多个文件。

<form action="fileuploads" method="POST" enctype="multipart/form-data">
    <input type="file" name="files" multiple />
    <input type="submit" value="上传文件" />
</form>

2.Controller层

在Controller层中，需要使用@RequestParam注解来获取多个文件上传的信息，此时获取到的是一个数组，需要循环处理每一个文件。

@RestController
public class FileUploadController {
    
    @PostMapping("/fileuploads")
    public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
        StringBuilder sb = new StringBuilder();
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            File destFile = new File("D:/temp/" + fileName);
            try {
                file.transferTo(destFile);
                sb.append(fileName + " ");
            } catch (IOException e) {
                e.printStackTrace();
                return "文件上传失败！";
            }
        }
        return "文件" + sb.toString() + "上传成功！";
    }
}

3.配置文件

与单文件上传相同，需要在配置文件中配置上传文件的大小限制和上传文件缓存的位置。

#文件上传大小限制
spring.servlet.multipart.max-file-size=10MB
#设置上传文件临时存储路径
spring.servlet.multipart.location=D:/temp

四、文件上传进度条显示

1.前端页面

在前端页面上，需要使用JavaScript代码来处理文件上传进度显示，使用HTML5的XMLHttpRequest对象进行文件上传。

function uploadFile() {
    var files = document.getElementById("formFile").files;
    var length = files.length;
    var data = new FormData();
    for (var i=0; i<length; i++) {
        data.append('files', files[i]);
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/fileuploads', true);
    xhr.onload = function () {
        document.getElementById("progress").style.display = "none";
        alert("文件上传完成！");
    };
    xhr.upload.onprogress = function (event) {
        var progress = document.getElementById("progress");
        if (event.lengthComputable) {
            progress.value = event.loaded/event.total*100;
        }
    };
    xhr.send(data);
}

2.Controller层

在Controller层中，需要设置@CrossOrigin注解来允许跨域请求，以便前端页面能够访问到后端程序。

@RestController
@CrossOrigin
public class FileUploadController {
    
    @PostMapping("/fileuploads")
    public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
        StringBuilder sb = new StringBuilder();
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            File destFile = new File("D:/temp/" + fileName);
            try {
                file.transferTo(destFile);
                sb.append(fileName + " ");
            } catch (IOException e) {
                e.printStackTrace();
                return "文件上传失败！";
            }
        }
        return "文件" + sb.toString() + "上传成功！";
    }
}

五、总结

本文详细介绍了SpringBoot如何实现文件上传及批量上传，以及文件上传进度条的显示。了解了以上内容，相信大家都能够成功地进行文件上传！