springBoot+Thymeleaf模板整合layui 图片的上传下载

    <div class="form-group">
        <label class="col-sm-3 control-label">轮播图：</label>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="bannerImage">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" hspace="200px"  width="200px" height="100px" id="image_display">
            <p id="demoText"></p>
        </div>
    </div>
    </div>
</form>
/**
 * 图片上传
 * */
layui.use('upload', function(){
    var $ = layui.jquery
        ,upload = layui.upload;
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#bannerImage',
        url: ctx + "common/upload",
        before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                debugger
                var imageobj=new Image();
                imageobj.src=result;
                let attr = $('#image_display').attr('src', imageobj['src']); //图片链接（base64）
                console.log(attr)

            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功
            debugger
            $("#bannerImage").val(res);
            console.log($("#bannerImage").val(res));
           $("#bannerImage").append('<input type="hidden" name="bannerImage" id="bannerImage" value="'+res.url+'"/>')
           // layer.msg(res.msg);
        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });
});

var prefix = ctx + "system/cmsBanner"
$("#form-cmsBanner-add").validate({
    rules:{
        xxxx:{
            required:true,
        },
    },
    focusCleanup: true
});

function submitHandler() {
    if ($.validate.form()) {
        $.operate.save(prefix + "/add", $('#form-cmsBanner-add').serialize());
    }
}

2、后台代码 上传和下载写下一个公共类里面

public static final String UPLOAD_PATH = "/profile/upload/";
@PostMapping("/common/upload")
@ResponseBody
public AjaxResult uploadFile(MultipartFile file) throws Exception
{
log.info("=============file==========="+file);
try
{
    // 上传文件路径
    String filePath = Global.getUploadPath();
    log.info("======filePath===="+filePath);
    // 上传并返回新文件名称
    String fileName = FileUploadUtils.upload(filePath, file);
    String url = serverConfig.getUrl() + UPLOAD_PATH + fileName;
    CmsBanner cmsBanner=new CmsBanner();
    cmsBanner.setBannerImage(url);
    log.info("============="+url);
    AjaxResult ajax = AjaxResult.success();
    ajax.put("fileName", fileName);
    ajax.put("url", url);
    return ajax;
}
catch (Exception e)
{
    return AjaxResult.error(e.getMessage());
}

}

下载：

@GetMapping("common/download")
public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request)
      {
    try
    {
        if (!FileUtils.isValidFilename(fileName))
        {
            throw new Exception(StringUtils.format("文件名称({})非法，不允许下载。 ", fileName));
        }
        String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);
        String filePath = Global.getDownloadPath() + fileName;

        response.setCharacterEncoding("utf-8");
        response.setContentType("multipart/form-data");
        response.setHeader("Content-Disposition",
                "attachment;fileName=" + FileUtils.setFileDownloadHeader(request, realFileName));
        FileUtils.writeBytes(filePath, response.getOutputStream());
        if (delete)
        {
            FileUtils.deleteFile(filePath);
        }
    }
    catch (Exception e)
    {
        log.error("下载文件失败", e);
    }
}

好了小伙伴 希望对你们有帮助！！！加油