使用layui中的form表单提交与upload上传

1.首先添加选择图片按钮

<div class="layui-form-item" style="width: 80%">
    <label class="layui-form-label">房间图片</label>
    <h5 id="fileName" style="float: left;margin:0 10px; line-height: 38px;"></h5>
    <button style="float: left;" class="layui-btn" id="preview_img" type="button">
        选择图片
    </button>
</div>

2.添加form表单提交按钮

<div class="layui-form-item" style="width: 80%">
    <div class="layui-input-block">
        <button id="addRoomType" class="layui-btn" lay-submit lay-filter="addRoomType" style="display: none">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>

3.写script语句

layui.use(['layer','form','upload'],function () {
    var layer = layui.layer
        ,form = layui.form
        ,upload = layui.upload;
    var $ = layui.$;
    /*上传图片*/
    upload.render({
        elem: '#preview_img'
        , url: 'addRoomType'
        , size: 1024
        , auto: false //不自动上传
        , choose: function (obj) {
            //预读本地文件
            obj.preview(function (index, file, result) {
                $('#fileName').html(file.name); //展示文件名
            })
        }
        , error: function (index, upload) {
            layer.msg('上传失败！' + index, { icon: 5 });
        }
    });
    //监听提交
    form.on('submit(addRoomType)', function (d) {
        var data = new FormData(document.getElementById("layer_window"));
        $.ajax({
            url: 'addRoomType',
            type: 'POST',
            data: data,
            processData: false,
            contentType: false,
            success: function (r) {
                if (r.code === 200) {
                    location.href = "";
                } else {
                    layer.msg(r.message);
                }
            }
        });
        return false;
    });
});

4.后台接收

@PostMapping("addRoomType")
@ResponseBody
public NingResponse addRoomType(MultipartFile file, RoomType roomType) throws IOException {

    String fileName = file.getOriginalFilename();
    InputStream inputStream = file.getInputStream();
    File uploadFile = new File(this.getClass().getResource("/").getPath() + "/static/static/img/", fileName);
    FileUtils.copyInputStreamToFile(inputStream, uploadFile);
    roomType.setTypeImg("/static/static/img/"+fileName);
    if (this.iRoomTypeService.save(roomType)) {
        return new NingResponse().message("添加成功").success();
    }
    return new NingResponse().message("添加失败").fail();
}