Gossip less, on the code.
add.html uploads pictures; saves the control class; show.html displays picture text.
In addition, the file upload needs to be configured and stored in the local location (profile in application.yml), and then the file can be found by searching the location.
add.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('修改整改任务')" />
<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-reform-edit" th:object="${inspectionReform}">
<input name="reformId" th:field="*{reformId}" type="hidden">
<input name="reformCheckid" th:field="*{reformCheckid}" type="hidden">
<div class="form-group">
<label class="col-sm-3 control-label">整改照片路径：</label>
<div class="col-sm-8 fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div class="">
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span> <input type="hidden" name="reformImgpath" th:field="*{reformImgpath}"><input id="filePath" type="file" th:field="*{reformImgpath}"></span>
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
</div>
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
var prefix = ctx + "model/reform";
$("#form-reform-edit").validate({
focusCleanup: true
});
function uploadFile(url) {
var formData = new FormData();
if ($('#filePath')[0].files[0] == null) {
$.modal.alertWarning("请先选择文件路径");
return false;
}
formData.append('reformId',$('#reformId').val());
formData.append('file', $('#filePath')[0].files[0]);
$.ajax({
url: url,
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
$.operate.successCallback(result);
}
});
}
function submitHandler() {
if ($.validate.form()) {
/*$.operate.save(prefix + "/edit", $('#form-check-edit').serialize());*/
uploadFile(prefix+"/edit");
}
}
</script>
</body>
</html>
control class
/**
* 修改保存整改任务
*/
@RequiresPermissions("model:reform:edit")
@Log(title = "整改任务", businessType = BusinessType.UPDATE)
@PostMapping("/edit")
@ResponseBody
public AjaxResult editSave(@RequestParam("file") MultipartFile file, @RequestParam("userid")long userid,InspectionReform inspectionReform) throws IOException {
User user = getSysUser();
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);
return toAjax(inspectionReformService.updateInspectionReform(inspectionReform));
}
show.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('整改任务列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<ul>
<li>
<label>创建人：</label>
<input type="text" name="reformCreateby"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<!-- <a class="btn btn-success" οnclick="$.operate.add()" shiro:hasPermission="model:reform:add">
<i class="fa fa-plus"></i> 添加
</a>-->
<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="model:reform:edit">
<i class="fa fa-edit"></i> 修改
</a>
<!--<a class="btn btn-danger multiple disabled" οnclick="$.operate.removeAll()" shiro:hasPermission="model:reform:remove">
<i class="fa fa-remove"></i> 删除
</a>-->
<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="model:reform:export">
<i class="fa fa-download"></i> 导出
</a>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
var editFlag = [[${
@permission.hasPermi('model:reform:edit')}]];
var removeFlag = [[${
@permission.hasPermi('model:reform:remove')}]];
var reformDeletedDatas = [[${
@dict.getType('inspection_delete')}]];
var reformStatusDatas = [[${
@dict.getType('reform_status')}]];
var prefix = ctx + "model/reform";
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "整改任务",
columns: [{
checkbox: true
},
{
field: 'reformImgpath',
title: '整改照片路径',
formatter:function (value,row,index) {
return $.table.imageView(value);
}
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="$.operate.edit(\'' + row.reformId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.reformId + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
</script>
</body>
</html>