利用layui的load模块解决图片上传

<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px">特征图谱或指纹图谱：</label>
<div class="layui-input-block">
<input type="text" name="medicinalFeatureImgPath" id="medicinalFeatureImgPath" autocomplete="off"
placeholder="" class="layui-input layui-inline" disabled>
<input type="hidden" name="bMedicinalFeatureImgPath" id="bMedicinalFeatureImgPath">
<button type="button" class="layui-btn layui-inline" id="btnBMedicinalFeatureImg">上传图片</button>
<button type="button" style="display: none;"
class="layui-btn layui-inline" id="btnUpBMedicinalFeatureImg"></button>
</div>
<div style="display: none;" class="layui-upload layui-input-block">
<div class="layui-upload-list">
<img class="layui-upload-img" id="BMedicinalFeatureImgFile">
</div>
</div>
</div>

/**
* 图片上传图片
* @param btnImg为点击button选择图片
* @param btnUpImg 为指向一个按钮触发上传
* @param mImgPath 图片名称，上传至数据库
* @param imgPath 图片名称 显示在页面上的
* @param medicinalimg 图片上传的路径 就是controller里面的那个请求方法拦截的那个
* @param upload 图片上传服务
*/
function uploadiImage(btnImg,btnUpImg,mImgPath,imgPath,medicinalimg,upload){ var imgname = uuid();//生成一个独一无二的字符串然后存在数据库中 var uploadInsts = upload.render({
elem: '#'+btnImg//框架内容，选择 上传的那个按钮 就告诉这个模块哪个点击哪个按钮发起这个上传文件的操作
,url: productBase.baseUrl+'/'+medicinalimg //根据你controller里的自己设
,accept: 'images'
,size:20000
,auto: false //选择文件后不自动上传
,bindAction: '#'+btnUpImg //指向一个按钮触发上传 这个跟上面那个配合使用，不自动上传就要选一个上传的按钮
,data: {imgname: imgname //就只传个uuid过去，而这个uuid就是存在数据库中的文件名，所以到了后台还要用文件的属性来获取图片的后缀名
} //可选项。额外的参数，如：
,choose: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file,result){
var namehous=file.name.substring(file.name.lastIndexOf("."),file.name.length); $('#'+mImgPath).val(imgname+namehous);//图片名称，上传至数据库
$('#'+imgPath).val(file.name);//图片名称,仅仅是在edit界面显示的名称
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
}
//上传成功
}
,error: function(){ }
});
}

layui.use(['form', 'layedit', 'upload', 'laydate'], function () { productBase.init();
hideShowInfo();
var layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
layer = layui.layer, //获取当前窗口的layer对象
form = layui.form,
upload = layui.upload, //获取upload模块
layedit = layui.layedit;
// var forms = layui.form;

uploadiImage('btnBMedicinalFeatureImg','btnUpBMedicinalFeatureImg','bMedicinalFeatureImgPath','medicinalFeatureImgPath','productBasebMedicinalFeatureImg',upload);

@ApiOperation(value="药材质量监测中的特征图谱照片上传", notes="药材质量监测中的特征图谱照片上传")
@PostMapping("/productBasebMedicinalFeatureImg")
public Map<String, Object> upLoadbMedicinalFeatureImg(MultipartFile file,HttpServletRequest
request,@RequestParam Map<String, Object> map) {
//String name = file.getOriginalFilename();
//String suffixName = name.substring(name.lastIndexOf("."));
return productBaseService.saveMedicinalFeatureImg(file,request,map);
}

@Override
public Map<String, Object> saveMedicinalFeatureImg(MultipartFile file, HttpServletRequest request,
Map<String, Object> map) {
// TODO Auto-generated method stub Map<String, Object> maps = new HashMap<String, Object>(); try {
// 判断是否拥有路径，没有就新建
String path = Constant.IMG_PATH_FILE;
if (!new File(path).exists()) {
new File(path).mkdirs();
}
/** 将图片文件保存到服务器，同时返回变成后图片的名字 */
String image = uploadMedicinalFeatrureFile(file, path, map); maps.put("code", 0);
} catch (Exception e) {
maps.put("code", 1);
e.printStackTrace();
}
return maps;//map返回就是代表一个状态而已 }

public static String uploadMedicinalFeatrureFile(MultipartFile file,String path,Map<String, Object> map) throws IOException{
String name = file.getOriginalFilename();
String suffixName = name.substring(name.lastIndexOf(".")); String medicinalFeatureUuid = (String)map.get("imgname");
String fileName = medicinalFeatureUuid+suffixName; File tempFile = new File(path,fileName);
if(!tempFile.getParentFile().exists()){
tempFile.getParentFile().mkdir();
}
if(tempFile.exists()){
tempFile.delete();
}
tempFile.createNewFile();
file.transferTo(tempFile);
return tempFile.getName();
}