springboot图片上传（搬过去就能用）

1、导js文件

用的thymeleaf模板引擎，注意路径，我的在 /static/js/layui.js

<script type="text/javascript" th:src="@{/js/layui.js}"></script>
<link rel="stylesheet" th:href="@{/css/layui.css}" type="text/css">

下载地址：layui文件

2、html代码（示例）

<div class="layui-form-item">
            
            <div class="layui-upload-drag" id="test10">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
                <div class="layui-hide" id="uploadDemoView">
                    <input th:type="hidden" id="path" name="path" value="">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
            </div>
</div>

3、加载layui组件及js上传代码（示例）

layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        upload.render({
            elem: '#test10'
            , url: '/file/upload' 
            , done: function (res) {
                if (res.code !== 200){
                    layer.msg(res.msg);
                }else{
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.path);
                    layui.$('#uploadDemoView').find('input').attr('value', res.title);
                }
            }
        });
    });

4、配置静态资源处理及上传路径（示例）

@Configuration
public class MvcConfig implements WebMvcConfigurer {

    public static final String UPLOAD_IMAGE_PATH="D:\\IDEAWorkPlace\\springboot_study\\src\\main\\resources\\static\\upload\\img";


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/**").addResourceLocations("file:" + UPLOAD_IMAGE_PATH  + "\\");
    }
}

5、接口代码（示例）

import static com.sample.springboot_study.config.MvcConfig.UPLOAD_IMAGE_PATH;

@Controller
public class FileController {

    /**
     * 文件上传
     */
    @RequestMapping("/file/upload")
    @ResponseBody
    public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        String fileName = file.getOriginalFilename();
        Map<String, Object> map = new HashMap<String, Object>();
        if (StringUtils.isEmpty(fileName)){
            map.put("code", 199);
            map.put("msg", "文件名为空");
            return map;
        }
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        fileName = UUID.randomUUID().toString().substring(0, 8) + suffix;
        File dest = new File(UPLOAD_IMAGE_PATH + "\\" + fileName);
        if (!dest.exists()){
            boolean b = dest.mkdirs();
            if (!b) {
                map.put("code", 199);
                map.put("msg", "文件夹创建失败");
                return map;
            }
        }
        file.transferTo(dest);
        map.put("title",fileName);
        map.put("path","/img/" + fileName);
        map.put("code",200);
        return map;
    }

}

R.java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class R<T> {

    private int code;
    private String msg;
    private T data;

    public static <T>R ok(int code, String msg){
        R r = new R();
        r.code = code;
        r.msg = msg;
        r.data = null;
        return r;
    }

    public static <T>R ok(int code, T data){
        R r = new R();
        r.code = code;
        r.msg = null;
        r.data = data;
        return r;
    }

    public static <T>R fail(int code, String msg){
        R r = new R();
        r.code = code;
        r.msg = msg;
        r.data = null;
        return r;
    }

}

6、结果

前端：

真实地址：