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

首先肯定要参考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="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>

其中这个#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的同时要同时触发文件的上传！