Ruoyi 图片上传

Ruoyi 图片上传

数据库图片字段

主页显示

     {
                    field: 'pic',
                    title: '学生照片',
                    formatter: function (value, row, index) {
                        return '<img src="' + value + '" width="50" height="50">';
                    }
                },

添加页面

    <div class="form-group">
            <label class="col-sm-2 control-label">学生照片：</label>
            <div class="col-sm-10">
                <input name="pic" id="pic1" class="form-control" type="hidden">//上传图片绑定数据向后端传值
                <a id="url"><img th:src="*{pic}" style="width: 90px;height: 90px"></a>//显示图片
                <input type="file" id="pic">//点击事件
            </div>
        </div>

  // 上传文件
    $("#pic").change(function () {
        var data = new FormData();
        data.append("file", $("#pic")[0].files[0]);
        $.ajax({
            type: "POST",
            url: ctx + "common/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    $("#url img").attr("src",result.fileName)//给添加页面加图片信息
                    $("#pic1").val(result.fileName)//向后端传值
                }
            },
            error: function(error) {
                alert("图片上传失败。");
            }
        });
    })