首先肯定要参考layui官网的upload模块文档:http://www.layui.com/doc/modules/upload.html
讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我们关于图片上传的逻辑是分两步的:点击submit,然后触发图片上事件,图片上传到服务器的指定文件夹中,名字是JavaScript中生成的uuid加上文件本来的后缀名。 然后随着表单一起送到后台,并去到dao层的是这个图片名称的uuid和后缀名(后缀名其实并没有上传而是在后台另外通过file对象获取)
现在直接上项目中的前端代码:
<div class="layui-form-item"> <label class="layui-form-label" style=" 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>
其中这个#medicinalFeatureImgPath是你选完图片后给用户看的图片,而这个#bMedicinalFeatureImgPath是隐藏的,里面装的是JavaScript产生的uuid,然后传到服务器上的。
在页面中的效果:
然后我们在JavaScript中把layui的upload上传的一些配置给封装成一个函数:
/** * 图片上传图片 * @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;
关键代码就那个upload,其他请无视……
然后调用函数把参数穿进去:
uploadiImage('btnBMedicinalFeatureImg','btnUpBMedicinalFeatureImg','bMedicinalFeatureImgPath','medicinalFeatureImgPath','productBasebMedicinalFeatureImg',upload);
然后后台的代码
controller:
@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); }
在controller中我们用spring的MultipartFile来接收传上来的文件(这个requset是没用用的,忘记删了),map里面装的是图片的uuid名字
看serviceImpl:
@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返回就是代表一个状态而已 }
关键是调用这个uploadMedicinalFeatureFile(file,path,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(); }
然后存到数据库的话,只要那个uuid名和表单其他信息一起上传然后走常规的流程就可以了。
所以在表单触发submit的同时要同时触发文件的上传!