bootstrap+springboot使用fileinput上传图片
首先使用fileinput组件，再写上传的js，因为是使用的RuoYi，所以直接调用common/upload接口即可
组件
<div class="form-group">
<label class="col-sm-2 control-label is-required">文章封面：label>
<div class="col-sm-10" style="width: 300px">
<input type="hidden" name="articleImage">
<input type="file" name="file" id="articleImage" class="form-control myfile" />
div>
div>
js
$(".myfile").fileinput({
uploadUrl: ctx + "common/upload", //接受请求地址
uploadAsync: true, //默认异步上传
showUpload : false, //是否显示上传按钮
showRemove: false, //是否显示移除按钮
showCaption: true, //是否显示标题
showPreview: true, //是否显示预览
dropZoneEnabled: false, //是否显示拖拽区域
// minImageWidth: 50,
// minImageHeight: 50,
// maxImageWidth: 1000,
// maxImageHeight: 1000,
//maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小
maxFileCount: 1, //允许同事上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n})超过允许的最大数值{m}!",
allowedFileTypes: ['image'], //配置允许文件上传的类型
allowedPreviewTypes: ['image'], //配置所有的被预览文件类型
allowedPreviewMimeTypes: ['jpg','png','gif'], //控制被预览的所有mime类型
language: 'zh'
}).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('')
});
// //异步上传返回结果处理
// $('.myfile').on('fileerror', function (event, data, msg) {
// console.log("fileerror");
// console.log(data);
// });
//
// //异步上传返回结果处理
// $(".myfile").on("fileuploaded",function (event, data, previewId, index) {
// console.log("fileuploaded");
// var ref = $(this).attr("data-ref");
// $("input[name='"+ ref +"']").val(data.response.url);
// });
//
// //上传前
// $('.myfile').on('filepreupload', function (event, data, previewId, index) {
// console.log("filepreupload");
// })
参考资料
文章：
fileinput 上传图片
bootstrap-fileinput的简单使用(图片上传和编辑)
springboot下bootstrap-fileinput上传、修改、删除图片（前端+后端）
老师给的代码：
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增物资选择')" />
<th:block th:include="include :: bootstrap-fileinput-css"/>
head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-select-add">
<div class="form-group">
<label class="col-sm-3 control-label">物资Id：label>
<div class="col-sm-8">
<input name="suppliesId" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">物资名称：label>
<div class="col-sm-8">
<input name="suppliesName" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">物资数量：label>
<div class="col-sm-8">
<input name="suppliesNum" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">物资类型Id：label>
<div class="col-sm-8">
<input name="typeId" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">物资类型父Id：label>
<div class="col-sm-8">
<input name="parentTypeId" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">图片地址：label>
<div class="col-sm-8">
<input type="hidden" name="imgPath">
<div class="file-loading">
<input class="form-control file-upload" id="imgPath" name="file" type="file">
div>
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">所需金币：label>
<div class="col-sm-8">
<input name="coin" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">分数：label>
<div class="col-sm-8">
<input name="suppliesScope" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">所有金币：label>
<div class="col-sm-8">
<input name="allCoin" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">所有分数：label>
<div class="col-sm-8">
<input name="allScope" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">批次号：label>
<div class="col-sm-8">
<input name="batchId" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">用户Id：label>
<div class="col-sm-8">
<input name="userId" class="form-control" type="text">
div>
div>
<div class="form-group">
<label class="col-sm-3 control-label">用户昵称：label>
<div class="col-sm-8">
<input name="userName" class="form-control" type="text">
div>
div>
form>
div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
var prefix = ctx + "scope/select"
$("#form-select-add").validate({
focusCleanup: true
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-select-add').serialize());
}
}
$(".file-upload").fileinput({
uploadUrl: ctx + 'common/upload',
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('')
})
script>
body>
html>
若依参考富文本图片上传