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

小百菜

已于 2023-08-29 23:25:19 修改

阅读量382

点赞数

分类专栏： java 文章标签： java

于 2022-06-14 16:18:52 首次发布

本文链接：https://blog.csdn.net/u014644574/article/details/125279991

版权

java 专栏收录该内容

107 篇文章 7 订阅

订阅专栏

        <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);
          })