SpringBoot 文件上传（可配置文件上传路径）

1. 在application.yml中配置文件上传路径 ，上传文件大小

application:
  #版本
  version: 1.0.0
  #文件上传路径
  profile: D:/profile/
spring:
  servlet:
    multipart:
      max-file-size: 30MB
      max-request-size: 30MB

2. 配置MVC，使文件上传路径可以被项目访问到

加载配置路径

@Component
@ConfigurationProperties(prefix = "application")
public class MyConfig{ 
   

    /** * 版本 */
    private String version;
    /** * 上传文件路径 */
    private static String profile;


    public String getVersion() { 
   
        return version;
    }

    public void setVersion(String version) { 
   
        this.version = version;
    }


    public static String getProfile() { 
   
        return profile;
    }

    public void setProfile(String profile) { 
   
        Twlyyx.profile = profile;
    }


}

MVC配置使http://IP:端口号/${server.context-path}/profile/图片路径可以访问到配置的文件夹

@Configuration
public class ResourceConfig implements WebMvcConfigurer { 
   

    //图片保存路径
    public static final String PIC_PATH = "/profile/";

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) { 
   
        /** 图片传路径 */
        registry.addResourceHandler("/profile/**").addResourceLocations("file:" + MyConfig.getProfile());

    }

3. 上传文件工具类

网上有很多，这里就不写了

4. 前端上传

 <form method="post" id="bannerForm">
	<img id="preview" width="200px" height="200px" onclick="show()" />
	<input type="file" title="上传图片" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)">
    <%--其他表单信息--%>
    <input type="text" name="info">
    <button type="submit">提交</button>
 </form>
 <script> //大图预览 function show() { 
      var img = new Image(); img.src = $("#preview").attr("src"); var imgHtml = "<img src='" + img.src + "' />"; //捕获页 layer.open({ 
      type: 1, shade: false, title: false, //不显示标题 area: ['600px', '500px'], // area: [img.width + 'px', img.height+'px'], content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响 cancel: function () { 
      //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 }); } }); } //上传预览 function imgPreview(fileDom) { 
      //判断是否支持FileReader if (window.FileReader) { 
      var reader = new FileReader(); } else { 
      alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); } //获取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是图片 if (!imageType.test(file.type)) { 
      alert("请选择图片！"); return; } //读取完成 reader.onload = function (e) { 
      //获取图片dom var img = document.getElementById("preview"); //图片路径设置为读取的图片 img.src = e.target.result; }; reader.readAsDataURL(file); } </script>

Ajax提交含有文件的图片

			//使用var form = $("#bannerForm");不生效
 			 var form = document.querySelector("#bannerForm");
                var formData = new FormData(form);
                // formData.append("file", $('#input_file')[0].files[0]);
                $.ajax({ 
   
                    url: "${ctx}/save",
                    type: 'POST',
                    cache: false, //上传文件不需要缓存
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success:function (data) { 
   
                        if (data.code == 0) { 
   
                            layer.alert('添加成功!', function () { 
   
                                window.location.href = '${ctx}/market/list';
                            });
                        } else { 
   
                            layer.msg("失败", { 
   icon: 2, time: 1000});
                        }
                    }
                });

5. 后台接收

 @ResponseBody
 @RequestMapping("/save")
 public Object save(Info info, MultipartFile file) { 
   
	···
	···
	···
	return ···; 
 }