目录

• 单文件上传
  • 表单上传
  • ajax上传
• 多文件上传
  • 表单上传
  • ajax上传
• 文件上传配置
  • 方法一：在配置文件中添加配置
  • 方法二：在启动类中添加Bean配置
• 踩坑经验

单文件上传

表单上传

1.前端表单

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="提交">
</form>

2.后端接收

    @PostMapping("/upload")
    public String upload(MultipartFile file, HttpServletRequest req) {
        SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
        String format = sdf.format(new Date());
        String realPath = req.getServletContext().getRealPath("/img") + format;
        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }
        String oldName = file.getOriginalFilename();
        String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
        try {
            file.transferTo(new File(folder, newName));
            String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/img" + format + newName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "error";
    }

ajax上传

1.前端

<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);
        $.ajax({
            type:'post',
            url:'/upload',
            processData:false,
            contentType:false,
            data:formData,
            success:function (msg) {
                $("#result").html(msg);
            }
        })
    }
</script>

2.后端相同

多文件上传

表单上传

1.前端

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">  //此时选择多个文件
    <input type="file" name="file">  //或者使用多个input标签
    <input type="submit" value="提交">
</form>

2.后端

   @PostMapping("/uploads")
    public String uploads(MultipartFile[] files,  //如果使用同一个名称，使用数组接收，如果不是同一名称，定义多个MultipartFile
                          HttpServletRequest req) {
        SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
        String format = sdf.format(new Date());
        String realPath = req.getServletContext().getRealPath("/img") + format;
        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }
        for (MultipartFile file : files) {
            String oldName = file.getOriginalFilename();
            String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
            try {
                file.transferTo(new File(folder, newName));
                String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/img" + format + newName;
                System.out.println(url);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return "success";
    }

ajax上传

1.前端

<div id="result"></div>
<input type="file" name="Files" id="Files" multiple="multiple" value="上传Files" />
<input type="button" value="上传" onclick="uploadFile()">
<script>
    function uploadFile() {
        var formData = new FormData();//就像cookie一样用,存入files[i];;数组形式
        var files = document.getElementById("Files").files;
        for (var i = 0; i < files.length ; i++)
            {
                formData.append("files_"+i, files[i]);
            }
        $.ajax({
                url: "/uploads",//请求地址
                dataType: "json",//数据格式
                type: "POST",//请求方式
                async: true,//是否异步请求
                cache: false,//上传文件无需缓存
                contentType: false,//必须
                processData: false,//用于对data参数进行序列化处理 这里必须false
                data: formData,
                success: function (data) {
                }
            })
    }
</script>

2.后端一致

文件上传配置

方法一：在配置文件中添加配置

#静态资源对外暴露的访问路径
file.staticAccessPath=/static/image/**
#文件上传目录（注意Linux和Windows上的目录结构不同）
#file.uploadFolder=/root/uploadFiles/
file.uploadFolder=d://uploadFiles/? ?#特别要注意此位置
#文件大小设置
spring.servlet.multipart.enabled=true  #是否支持 multipart 上传文件
spring.servlet.multipart.max-file-size=30MB ?#设置单个文件的大小
spring.servlet.multipart.max-request-size=100MB  ?#设置总上传的数据大小
spring.servlet.multipart.file-size-threshold=0，支持文件写入磁盘
spring.servlet.multipart.location=，上传文件的临时目录
spring.servlet.multipart.resolve-lazily=false，是否支持 multipart 上传文件时懒加载

方法二：在启动类中添加Bean配置

启动类 或 配置类

  /**
   * 文件上传配置
   * @return
   */
  @Bean
  public MultipartConfigElement multipartConfigElement() {
    MultipartConfigFactory factory = new MultipartConfigFactory();
    // 单个文件数据大小
    factory.setMaxFileSize("10240KB"); //KB,MB
    // 设置总上传数据总大小
    factory.setMaxRequestSize("102400KB");
    // 设置文件路径
    factory.setLocation(PropertyUtil.getPropertValueByKey("rootpath"));
    return factory.createMultipartConfig();
  } 

踩坑经验

https://www.jianshu.com/p/d8666f2e698f

原文地址：https://www.cnblogs.com/luckyhui28/p/12348300.html