接触若依fast框架---搭建若依fast 学生图片-bootstarp-fileinput

1. 添加页面：add.html
   需引入：

    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: bootstrap-fileinput-js" />

2.add.html页面前台

<div class="form-group">
                <label class="col-sm-3 control-label">学生照片</label>
                <div class="col-sm-8">
                    <input type="file" name="file" class="myfile" multiple>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">照片地址：</label>
                <div class="col-sm-8">
                    <input name="sfile" class="form-control" type="text" id="imagePath">
                </div>
            </div>

$(".myfile").fileinput({
            uploadUrl: ctx + "common/upload", //接受请求地址
            uploadAsync : true, //默认异步上传
            showUpload : false, //是否显示上传按钮,跟随文本框的那个
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : true,//是否显示标题,就是那个文本框
            showPreview : true, //是否显示预览,不写默认为true
            dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount : 1, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            validateInitialCount : true,
            previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh'
        })
        //异步上传返回结果处理
        $('.myfile').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            console.log(data);
        });
        //异步上传返回结果处理
        $(".myfile").on("fileuploaded", function(event, data ,previewId ,index) {
            if(data.response.code == 0){
                $('#imagePath').val(data.response.fileName);
            }
        });
        //上传前
        $('.myfile').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload");
        });

需要注意的一点，在学生照片这一项中的name属性 必须得和jq端请求的common/upload里面的参数file保持一致，不然无法上传图片。另外，请求完上传成功之后，前台在fileupload返回结果处理进行把图片路径名字存入到数据库，也就是这一句：$('#imagePath').val(data.response.fileName);，#imagePath这个选择器是我数据库中列名的input框，以下是common/upload：

/**
     * 通用上传请求
     */
    @PostMapping("/common/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file, Student student) throws Exception
    {
        try
        {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("fileName", fileName);
            ajax.put("url", url);
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }

首页显示：

{
                    field: 'sfile',
                    title: '学生照片',
                    formatter:function (value,row,index) {
                        return $.table.imageView(value);
                    }
                },