Springboot+layui实现上传图片，并保存到数据库，并展示在页面中

前言

在写项目时候，因为要上传图片保存到数据库，然后从数据库中读取出来，为了实现这一功能，在网上查找了很多资料，最后使用layui官方组件，加上springboot实现。具体实现就是把图片上传到指定的保存路径（我这里保存在本地了），然后路径上传到数据库。后来演示项目时候发现chrome浏览器不能直接访问本地文件，然后又加上了路径映射。

展示

layui的上传部分

<div class="layui-form-item">
	<label class="layui-form-label">照片</label>
	<div class="layui-input-block">
		<!-- 上传按钮 -->
        <button type="button" class="layui-btn" id="upload1">
        	上传图片
        </button>
        <!-- 隐藏的input -->
        <input type="hidden" id="pic" name="pic"th:value="${obj?.pic}"/>
        <!-- 预览区域 -->
        <div id="imgDiv" class="layui-upload-list" style="display: none;">
        	<img class="layui-upload-img" width="100px" height="80px" id="demo1" name="msg"/>
            <p id="demoText"></p>
        </div>
	</div>
</div>

//普通图片上传
        var uploadInst = upload.render({
            elem: '#upload1', //绑定元素
            url: '/car/uploadFile', //上传接口
            before: function(obj){
                //预读本地文件示例
                obj.preview(function(index, files, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

            },
            done: function(res){
                //如果上传失败
                if(res){
                    //上传成功
                    layer.alert("上传成功"+res.url);
                    document.getElementById("pic").value = res.url;
                    $("#imgDiv").css("display","")// 显示图片框
                } else {
                    return layer.msg('上传失败');
                }
            },
            error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

后台

@ResponseBody
    @RequestMapping(value = "/uploadFile",method = RequestMethod.POST)
    public Map<String, Object> uploadFile(HttpServletRequest servletRequest, @RequestParam("file") MultipartFile file)
            throws IOException {
        // 如果文件内容不为空，则写入上传路径
        if (!file.isEmpty()) {
            // 上传文件路径
            String UploadPath = uploadPath;
            //取得原文件名字
            String fileName = file.getOriginalFilename();
            //取得文件扩展名
            String suffix = fileName.substring(fileName.lastIndexOf("."));
            //提取系统时间作为新文件名
            String prefix = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date().getTime());
            //保存路径
            // 上传文件名
            String filename = prefix+suffix;
            File filepath = new File(UploadPath, filename);
            // 判断路径是否存在,没有创建
            if (!filepath.getParentFile().exists()) {
                filepath.getParentFile().mkdirs();
            }
            // 将上传文件保存到一个目标文档中
            File file1 = new File(UploadPath + File.separator + filename);
            file.transferTo(file1);
            Map<String, Object> res = new HashMap<>();
            // 返回的是一个url对象,图片名称
            res.put("url", filename);
            return res;
        } else {
            return null;
        }
    }

我定义了保存路径

@Value("${upload-path}")
    private String uploadPath;

还有路径映射文件

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/image/**").addResourceLocations("file:E:/image/");
    }
}

配置文件

upload-path: E:/image/
spring:
	resources:
	    static-locations: classpath:/static/,file:${upload-path}

前端展示

通过layui获取

{field:'pic',title:'车辆图片',algin:'center',
                        templet:function (d) { return '<div><img src="/image/'+d.pic+'", ' +
                            'style="width: 200px;height: 100px"></div>'}},