SpringBoot文件上传下载，构建form表单异步提交

本是古典何须时尚 2023-10-06 22:53 1阅读 0赞

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

# 单个文件最大限制
    spring.servlet.multipart.max-file-size=100MB
    # 整体请求大小限制
    spring.servlet.multipart.max-request-size=100MB

文件上传

@PostMapping("/upload")
        public String upload(@RequestParam("file") MultipartFile file, @RequestParam Map<String, Object> params) {
            try {
                if (!file.isEmpty()) {
                    String filename = file.getOriginalFilename();//上传文件名
                    String suffix = filename.substring(filename.lastIndexOf("."));//后缀
                    String id = UUID.randomUUID().toString().replace("-", "");
                    String file_name = id + suffix;
                    File f = new File("d:/", file_name);
                    if (!f.getParentFile().exists()) {
                        f.getParentFile().mkdirs();
                    }
                    //转移文件
                    file.transferTo(f.getAbsoluteFile());
                    return "上传成功";
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }

后台最原始的取出上传文件

request.getParts()获取上传文件  
request.getParts(“属性名”)用于获取使用multipart/form-data格式传递的http请求的请求体，通常用于获取上传文件。

Part part = reqeust.getPart("name属性值"); //part就是获取的文件
    part.write("路径名");//把文件写入的地址
    part.getSubmittedFileName();//拿到文件名

多文件上传

@PostMapping("/upload")
        public void upload(@RequestParam() MultipartFile[] files, @RequestParam Map<String, Object> params)  {
            try {
                for(int i = 0; i < files.length; i++) {
                    MultipartFile file = files[i];
                    if (!file.isEmpty()) {
                        String filename = file.getOriginalFilename();//上传文件名
                        String suffix = filename.substring(filename.lastIndexOf("."));//后缀
                        String id = UUID.randomUUID().toString().replace("-", "");
                        String file_name = id + suffix;
                        File f = new File("/新路径/", file_name);
                        if (!f.getParentFile().exists()) {
                            f.getParentFile().mkdirs();
                        }
                        //转移文件
                        file.transferTo(f.getAbsoluteFile());
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

文件下载

@PostMapping("/tablePortalDataDownload")
        public void tablePortalDataDownload(HttpServletResponse response, @RequestParam Map<String, Object> params) {
            ServletOutputStream out = null;
            FileInputStream fis = null;
            try {
                // 1、下载文件的路径
                File file = new File("文件路径");
                //2、下载的文件名
                String fileName = file.getName();
                //3、设置response的Header
                response.addHeader("Content-Length", "" + file.length());
                response.addHeader("Content-Type", "application/octet-stream");//任意类型的二进制流数据
                response.addHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8"));
                // 4、获取下载文件的输入流
                fis = new FileInputStream(file);
                // 循环取出流中的数据
                out = response.getOutputStream();
                byte[] buf = new byte[1024 * 1024];
                int len;
                while ((len = fis.read(buf)) != -1) {
                    out.write(buf, 0, len);
                    out.flush();
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if (out != null) {
                    try {
                        out.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                if (fis != null) {
                    try {
                        fis.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }

## 实现文件异步上传 ##

使用js来实现异步文件上传

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.js"></script>
    </head>
    <body>
    <form id="demoForm" method="post"
          enctype="multipart/form-data"
          action="/upload">
        <div>
            <label>上传文件
                <input id="file" type="file" name="file">
            </label>
        </div>
        <button type="submit">上传文件</button>
    </form>
    <img id="image" src="" alt="">
    
    <script>
        // 在id为demoForm的表单提交时运行的方法
        $("#demoForm").submit(function () {
            // 获得用户选中的所有文件对象
            let files = document.getElementById("file").files;
            // 判断是否选中了文件
            if (files.length > 0) {
                // 执行上传操作
                uploadFile(files[0]);
            } else {
                alert("请选择要上传的文件");
            }
            // 阻止表单原有的提交效果,实现异步提交
            return false;
        })
    
        function uploadFile(file) {
            // 上传图片(文件)需要表单,先创建表单对象
            let form = new FormData();
            // 向表单对象中保存名称和它对应的数据
            form.append("file", file);
            axios.post('/upload', form).then(function (response) {
                console.log(response.data);
            })
        }
    </script>
    </body>
    </html>

基本所有html标签都有对应的实例方法。

比如form标签

let form = new FormData();
            // 向表单对象中保存名称和它对应的数据
            form.append("file", file);
            axios.post('/upload', form).then(function (response) {
                console.log(response.data);
            })

再比如 img标签

.then(function(response) {
                // 我们要将上传的图片显示在富文本编辑器中
                // 创建一个Img标签
                let img=new Image();
                // 设置img的src属性值为上传图片的url
                img.src=response.data;
                // summernote提供的向内容中添加标签的方法
                $("#summernote").summernote("insertNode",img);
              })