Spring Boot多文件上传_spring boot 多文件上传-CSDN博客

本文链接：https://blog.csdn.net/m0_46635265/article/details/123122711

单个按钮选择多个文件上传

在这里插入图片描述
前端代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/upload2" method="post" enctype="multipart/form-data">
  <input type="file" name="files" multiple>
  <input type="submit" value="上传">
</form>
</body>
</html>

后端代码：

@RestController
public class FileUploadController2 {

    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    @PostMapping("/upload2")
    String Upload(MultipartFile[] files, HttpServletRequest req){
        //获取临时目录
        String realPath = req.getServletContext().getRealPath("/");
        System.out.println(realPath);
        //获得路径
        String format = sdf.format(new Date());
        String path = realPath + format;
        //创建文件夹
        File fold = new File(path);
        while (!fold.exists()){
            fold.mkdirs();
        }
        try {
        for (MultipartFile file : files) {
            String oldname = file.getOriginalFilename();
            //新文件名
            String newname = UUID.randomUUID().toString() + oldname.substring(oldname.lastIndexOf("."));
                file.transferTo(new File(fold,newname));
                String s = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newname;
                System.out.println("s="+s);
        }
        } catch (IOException e) {
            e.printStackTrace();
        }

       return "";
    }
}

接收一个数组类型的文件，遍历数组，将所有上传的文件保存到本地已经创建好的文件夹

单个按钮选择单个文件上传（多个）

在这里插入图片描述

前端代码测试：在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/upload3" method="post" enctype="multipart/form-data">
  <input type="file" name="file1" >
    <input type="file" name="file2" >
  <input type="submit" value="上传">
</form>
</body>
</html>

后端代码：

@RestController
public class FileUploadController3 {
    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
    @PostMapping("/upload3")
    public void upload(MultipartFile file1, MultipartFile file2, HttpServletRequest req){
        String realPath = req.getServletContext().getRealPath("/");
        String format = sdf.format(new Date());
        String path = realPath + format;
        File folder = new File(path);
        while (!folder.exists()){
            folder.mkdirs();
        }

        try {
            String oldname1 = file1.getOriginalFilename();
            String newname1 = UUID.randomUUID().toString() + oldname1.substring(oldname1.lastIndexOf("."));
            file1.transferTo(new File(folder,newname1));
            String s1 = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newname1;
            System.out.println("s1="+s1);

            String oldname2 = file2.getOriginalFilename();
            String newname2 = UUID.randomUUID().toString() + oldname2.substring(oldname2.lastIndexOf("."));
            file2.transferTo(new File(folder,newname2));
            String s2 = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newname2;
            System.out.println("s2="+s2);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

需要接收多个文件变量，每一个都必须单另分配

Ajax上传

前端测试页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="result"></div>
<input type="file" id="file">
<input type="button" value="上传" onclick="uploadFile()">
<script>
    function uploadFile(){
        var file = $("#file")[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        formData.append("name","dong");
        $.ajax({
            type:'post',
            url:'/upload',
            processData:false,
            contentType:false,
            data:formData,
            success:function (msg){
                $("#result").html(msg);
            }
        })
    }
</script>
</body>
</html>

后端接收代码：

@RestController
public class FileUploadController {

    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    @PostMapping("/upload")
    String Upload(MultipartFile file, HttpServletRequest req){
        //获取临时目录
        String realPath = req.getServletContext().getRealPath("/");
        System.out.println(realPath);
        //获得路径
        String format = sdf.format(new Date());
        String path = realPath + format;
        //创建文件夹
        File fold = new File(path);
        while (!fold.exists()){
            fold.mkdirs();
        }
        String oldname = file.getOriginalFilename();
        //新文件名
        String newname = UUID.randomUUID().toString() + oldname.substring(oldname.lastIndexOf("."));
        try {
            file.transferTo(new File(fold,newname));
            String s = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newname;
            return s;
        } catch (IOException e) {
            e.printStackTrace();
        }

       return "";
    }
}