layUI模板上传图片

后台代码实现

*@ResponseBody
 @RequestMapping(value = "/upload")
public Map upload(MultipartFile file, HttpServletRequest request) {
     String prefix = "";
     String dateStr = "";
     //保存上传
     OutputStream out = null;
     InputStream fileInput = null;
     try {
         if (file != null) {
             String originalName = file.getOriginalFilename();
             prefix = originalName.substring(originalName.lastIndexOf(".") + 1);
            *//* Date date = new Date();*//*
             String uuid = UUID.randomUUID() + "";
             *//*SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
             dateStr = simpleDateFormat.format(date);
            *//*
             String filepath = "E:\\apache-tomcat-8.5.34\\webapps\\images\\" + uuid + "." + prefix;
             File files = new File(filepath);
             //打印查看上传路径
             System.out.println(filepath);
             if (!files.getParentFile().exists()) {
                 files.getParentFile().mkdirs();
             }
             file.transferTo(files);
             Map<String, Object> map2 = new HashMap<>();
             Map<String, Object> map = new HashMap<>();
             map.put("code", 0);
             map.put("msg", "");
             map.put("data", map2);
             map2.put("src", uuid + "." + prefix);
             return map;
         }
     } catch (Exception e) {
     } finally {
         try {
             if (out != null) {
                 out.close();
             }
             if (fileInput != null) {
                 fileInput.close();
             }
         } catch (IOException e) {
         }
     }
     Map<String, Object> map = new HashMap<>();
     map.put("code", 1);
     map.put("msg", "");
     return map;

 }*/

js实现

layui.use('upload', function () {
    var $ = layui.jquery
        , upload = layui.upload;

    //普通图片上传
    var uploadInst = upload.render({
        elem: '#test1'
        , url: '../resGallery/upload/'
        , accept: 'images'
        , dataType: "josn"
        , size: 50000
        , before: function (obj) {
            obj.preview(function (index, file, result) {

                $('#demo1').attr('src', result);
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code > 0) {
                return layer.msg('上传失败');
            }
            //上传成功
            var demoText = $('#demoText');
            demoText.html('<span style="color: #4cae4c;">上传成功</span>');

            var fileupload = $(".image");
            fileupload.attr("value", res.data.src);
            console.log(fileupload.attr("value"));
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
});

其中url的路径写的是上面后台代码实现，为的是让照片编码然后存到数据里，如下如

前段代码

<form class="layui-form" action="../resGallery/upload" method="post"
      enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">名称:</label>
        <div class="layui-input-block">
            <input type="text" name="title" th:value="${gallery==null}? '' : ${gallery.title}"
                   placeholder="图片标题" autocomplete="off" class="layui-input "/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">说明:</label>
        <div class="layui-input-block">
            <input type="text" name="detail" th:value="${gallery==null}? '' : ${gallery.detail}"
                   placeholder="图片详情" autocomplete="off"
                   class="layui-input "/>
        </div>
    </div>
    <!--************这里是上传图片的代码***************-->
    <!--************这里添加的隐藏的输入框，用来传递images的参数***************-->
    <input type="hidden" name="img" class="image"
           multiple="multiple"/>
    <div class="layui-form-item">
        <label class="layui-form-label ">照片:</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
           
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" height="200px" width="200px"/>
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <!--************上面里是上传图片的代码***************-->
    <br/>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-radius  layui-btn-danger">取消</button>
            &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
            <button class="layui-btn layui-btn-radius layui-btn-normal" type="submit">保存</button>
        </div>
    </div>
</form>

最重要的是spring配置文件一定要添加如下配置，不然会报接口异常

<bean id="multipartResolver"
     class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- set the max upload size100MB -->
   <property name="maxUploadSize">
      <value>104857600</value>
   </property>
   <property name="maxInMemorySize">
      <value>4096</value>
   </property>
   <property name="defaultEncoding">
      <value>utf-8</value>
   </property>
</bean>

然后自己再写一个保存到数据库的控制器就行了，这个保存到数据库的代码要根据自己的情况，我这只是我自己项目中的，不一定是适合所有人。

@RequestMapping(value = "/save")
   public String save(HttpServletRequest request, HttpServletResponse response, String img, String detail, String title) {
       Gallery gallery = new Gallery();
       gallery.setImg(img);
       gallery.setTitle(title);
       gallery.setDetail(detail);
       String[] galleryResult = galleryService.upload(gallery);

       if (gallery ==null ) {
           request.setAttribute("failMsg", "上传失败，请重新上传！");
           return "/page/personUpload";
       } else {
           return "/page/index";
       }

效果如图所示