springboot图片/文件上传

在项目中难免会经常使用到文件上传，去找了一些资料，整理成工具类，方便以后直接使用。在这里使用一个demo记录，代码如下：

使用ajax提交数据的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 >图片上传Demo</h1>
<form action="/fileUpload" method="post" enctype="multipart/form-data">
    <p>选择文件: <input id="sel_file" type="file" name="photo"/></p>
    <p><input class="submit" type="submit" value="提交"/></p>
</form>

<script src="../static/js/jquery-3.3.1.min.js"></script>
<script>
    $(".submit").on("click",function () {

        var formData = new FormData();

        formData.append("photo",$("#sel_file")[0].files[0]);

        $.ajax({
            url:'/fileUpload',
            dataType:'json',
            type:'POST',
            async: false,
            data: formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                console.log(data);
                alert(data.msg);

            },
            error:function(response){
                alert('上传异常！');
            }
        });
    });
</script>

</body>
</html>

值得注意的地方是：

  • formData.append里面的key要和文件的input标签的name属性值一致
  • ajax的两个重要属性要设置为false，否则上传会异常：
      • processData : false,// 使数据不做处理
      • contentType : false,

 

下面是后端代码

使用springboot文件上传，需要给出相应的配置

# 设置单个文件最大内存
spring.servlet.multipart.max-file-size=10MB
# 单次请求的文件最大内存
spring.servlet.multipart.max-request-size=50MB

# 自定义文件上传路径
web.upload-path=D:/upload/

 上传请求处理的controller

@Controller
public class FileUploadController {

    //路径
    @Value("${web.upload-path}")
    private String path;


    @PostMapping("/fileUpload")
    @ResponseBody
    public Map<String, String> upload(@RequestParam(value = "photo")MultipartFile file) throws IOException {
        Map<String, String> map = new HashMap<>();

        if (!file.isEmpty()) {
            //存储文件的路径 + 文件分隔符 （'/'）+ 文件名
            File filePath = new File(path + File.separator + file.getOriginalFilename());
            //路径不存在就创建一个
            if (!filePath.getParentFile().exists()) {
                filePath.getParentFile().mkdirs();
            }
            //保存文件
            file.transferTo(filePath);
            map.put("msg", "success");
        }else {
            map.put("msg", "文件不存在");
        }

        return map;
    }

}

 

 一个上传后的文件不会使用原文件名，而是随机生成的不重复的文件名，可以使用UUID生成

使用UUID随机生成新的文件名

public class UUIDUtils {

    public static String getUUID(){
        return UUID.randomUUID().toString().replace("-", "");
    }
}

 

 

以上就是图片上传的主要代码，能够完成所有文件上传。

但是，如果前端想访问上传的文件，例如前端要获取上传的文件用于预览，就涉及到跨域问题。需要配置静态资源映射，主要是一个自定义的配置类，代码如下：

@Configuration
public class MyWebConfig implements WebMvcConfigurer {

    /*
     * 静态资源本地映射
     * img是虚拟路径
     * 映射到本地D盘upload下
     * 浏览器访问:localhost:8080/img/xxx文件
     * */
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/img/**")      //访问的虚拟路径
                .addResourceLocations("file:D:/upload/")        //允许跨域的站点路径
                .setCachePeriod(32456789);  //在指定毫秒内不用请求


    }

}

 

这是我自己写的小demo，如果有什么不对的地方，请多指教(#^.^#)！

posted @ 2020-06-15 13:43  乐子不痞  阅读(451)  评论(0)  编辑  收藏  举报
回到顶部