springboot上传单个文件，多个文件以及文件和表单数据同时提交

小咪咪 2023-02-17 02:26 35阅读 0赞

一直有小伙伴不知道springboot项目的文件上传功能，今天我们就来搞懂它，读完本篇文章你可以知道以下内容

1.  单个文件上传
2.  多个文件上传
3.  文件与form表单普通属性同时提交
4.  通过ajax提交form表单（含文件上传 ）
5.  文件下载（解决中文文件名乱码）

首先来看前端html，一个页面中同时实现了ajax方式提交表单（含附件）以及通过submit方式进行表单提交（带附件）

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
        <script src="/webjars/jquery/3.5.1/jquery.js"></script>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            var uploadFile = function () { 
                var formdata = new FormData(document.getElementById("forms"));
                console.log(formdata);
                $.ajax({ 
                    url:"/upload",
                    type: "POST",
                    data: formdata,
                    processData:false,
                    contentType:false,
                    success:function(){ 
                        console.log("over...");
                    },
                    error: function (e) { 
                        alert("错误")
                    }
                })
    
            }
    
        </script>
    </head>
    <body>
    
    <div class="container">
    
        <form class="form-signin" id="forms" th:action="@{/upload}" method="post" enctype="multipart/form-data">
            <h2 class="form-signin-heading">个人信息</h2>
            <input type="hidden" th:id="${person.id}" name="id" th:value="${person.id}"/>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">用户名</span>
                <input type="text" class="form-control" placeholder="用户名" id="userName" name="userName" th:value="${person.userName}" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">年   龄</span>
                <input type="text" class="form-control" placeholder="age" id="age" name="age" th:value="${person.age}" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon3">手机号</span>
                <input type="text" class="form-control" placeholder="mobile" id="mobile" name="mobile" th:value="${person.mobile}" aria-describedby="basic-addon1">
            </div>
            <div class="form-group">
                <label for="file">上传附件</label>
                <input type="file" id="file" name="file" >
                <p class="help-block">Example block-level help text here.</p>
            </div><div class="form-group">
                <label for="files">上传多附件</label>
                <input type="file" id="files" name="files" multiple>
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary btn-default" id="upload" onclick="uploadFile()">ajax上传</button>
                    <button type="submit" class="btn btn-primary btn-default" id="" >submit上传</button>
            </div>
        </form>
    
    </div> 
    </body>
    </html>

后端代码：

package com.myproject.springmybatis.controller;
    
    import com.myproject.springmybatis.model.Person;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    
    @Controller
    public class FileUploadController { 
    
        @GetMapping("/upload")
        public String toUpload(ModelMap map){ 
            Person person = new Person();
            person.setPassword("!23456");
            person.setAge(18);
            person.setId(1L);
            person.setUserName("zhangsan");
            map.put("person", person);
            return "fileUpload";
        }
    
        @PostMapping("/upload")
        @ResponseBody
        public Map<String,Object> upload(Person person, @RequestParam("file") MultipartFile file,@RequestParam("files") MultipartFile[] files) throws IOException { 
            Map<String,Object> map = new HashMap<>();
            String filePath = "/Users/xumingfei/Desktop/test/";
            System.out.println(person);
            if (!file.isEmpty()) { 
                String contentType = file.getContentType();
                String filename = file.getOriginalFilename();
    
                file.transferTo(new File(filePath+filename));
                map.put("msg","上传单个成功");
            }else { 
                map.put("msg","上传失败");
            }
            for (MultipartFile f :
                    files) { 
                String fname = f.getOriginalFilename();
                f.transferTo(new File(filePath+fname));
                System.out.println(f.getOriginalFilename());
    
            }
            map.put("msg1","上传多个附件成功");
            return map;
        }
        
        /** * 文件下载 * @param request * @param response * @param fileName * @return * @throws IOException */
    	@RequestMapping("/downloadFile")
        @ResponseBody
        public String download(HttpServletRequest request, HttpServletResponse response, @RequestParam("fileName") String fileName) throws IOException { 
       		if (StringUtils.isEmpty(fileName)) { 
                fileName = "test附件.doc";
            }
            if (fileName != null) { 
                File file = new File("/Users/xumingfei/Desktop/test/"+fileName);
                if (file.exists()){ 
                    String userAgent = request.getHeader("User-Agent");
                    if (userAgent.contains("MSIE") || userAgent.contains("Trident")) { 
                        fileName = java.net.URLEncoder.encode(fileName, "UTF-8");
                    } else { 
                        // 非IE浏览器的处理：
                        fileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
                    }
                    response.setContentType("application/force-download");
                    response.addHeader("Content-Disposition","attachment;fileName="+fileName);
                    byte[] buffer = new byte[1024];
                    FileInputStream inputStream = null;
                    BufferedInputStream bufferedInputStream = null;
                    try { 
                        inputStream = new FileInputStream(file);
                        bufferedInputStream = new BufferedInputStream(inputStream);
                        OutputStream os = response.getOutputStream();
                        int i = bufferedInputStream.read(buffer);
                        while (i != -1) { 
                            os.write(buffer, 0, i);
                            i = bufferedInputStream.read(buffer);
                        }
                        return "download success";
                    } catch (Exception e) { 
                        e.printStackTrace();
                    }finally { 
                        bufferedInputStream.close();
                        inputStream.close();
                    }
                }
            }
            return "failure";
        }
    }

大家喜欢的话不妨给小编点个赞吧！扫一扫关注公众号不迷路。  
![在这里插入图片描述][20200610224750922.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V0aGFuX194dQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V0aGFuX194dQ_size_16_color_FFFFFF_t_70 1]

[20200610224750922.png]: https://img-blog.csdnimg.cn/20200610224750922.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V0aGFuX194dQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061022513176.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V0aGFuX194dQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V0aGFuX194dQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061022513130.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V0aGFuX194dQ==,size_16,color_FFFFFF,t_70