一:图片的显示
在列表页加入
{ field: 'cityImg', title: '城市图片', formatter: function (value, row, index) { console.log("aa"+value); return '<img src="http://localhost:8080/ShadowLine/'+value+'" width="150" height="100">'; } },
注意我的路径是网络路径,改成本地的绝对路径没有成功。
二:图片的上传
生成代码的时候在图片那一列选择上传控件
<div class="form-group"> <label class="col-sm-3 control-label">电影图片:</label> <div class="col-sm-8"> <input type="hidden" name="filmImg" th:field="*{filmImg}"> <div class="file-loading"> <input class="form-control file-upload" id="filmImg" name="file" type="file"> </div> </div> </div>
$(".file-upload").each(function (i) { var val = $("input[name='" + this.id + "']").val() $(this).fileinput({ 'uploadUrl': ctx + 'common/upload1', initialPreviewAsData: true, initialPreview: [val], maxFileCount: 1, autoReplace: true }).on('fileuploaded', function (event, data, previewId, index) { $("input[name='" + event.currentTarget.id + "']").val(data.response.url) }).on('fileremoved', function (event, id, index) { $("input[name='" + event.currentTarget.id + "']").val('') }) $(this).fileinput('_initFileActions'); });
若依这个框架自带了一个文件上传的方法。
在CommonController里面
在CommonController里面 /** * 通用上传请求 / @PostMapping("/common/upload") @ResponseBody public AjaxResult uploadFile(MultipartFile file) throws Exception { try { /* * 这个地方只负责上传 不负责保存 保存是在你具体业务里 所有i 你在这个位置做测试是没用的 */ // 上传文件路径 String filePath = “D:\Environment\workspace\ShadowLine\WebContent\imgs\city\cityImg\”; System.out.println(“上传图片的路径是:”+filePath); // 上传并返回新文件名称 String fileName=FileUploadUtils.upload(filePath, file);
System.out.println("上传图片的名字是:"+fileName); String url = "imgs/city/cityImg/"+fileName; System.out.println("url是"+url);//这个地方是存在数据库里图片的那个字段 AjaxResult ajax = AjaxResult.success(); ajax.put("fileName", fileName); ajax.put("url", url); return ajax; } catch (Exception e) { return AjaxResult.error(e.getMessage()); } }
效果图: