前台html的代码：
<div class="layui-form-item"> ???????????<label class="layui-form-label">电影图片</label> ???????????<div class="layui-input-block"> ???????????????<input type="hidden" name="imageName" value="${film.imageName}" required lay-verify="required" /> ???????????????<button type="button" class="layui-btn" id="chooseImage"> ???????????????????<i class="layui-icon"></i>选择文件 ???????????????</button> ???????????????<button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button> ???????????</div> ???????</div>js的代码，很简单：
upload.render({ ???????????????elem: ‘#chooseImage‘ ???????????????,url: ‘/admin/film/uploadImage‘ ???????????????,accept: ‘images‘ ???????????????,auto: false ???????????????,bindAction: ‘#uploadBtn‘ ???????????????,done: function(res){ ???????????????????console.log(res); ???????????????????console.log(res.newFileName); ???????????????????// $("[name=imageName]").val(res.data.src); ???????????????} ???????????});官方文档里面说，done的回调参数有三个，res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
console.log(res.newFileName);这个打印出来的就是我传到前台的值了，截图如下
后台代码如下：
@RequestMapping("/uploadImage") ???public Map<String,Object> uploadImage(MultipartFile file, HttpServletRequest request)throws Exception{ ???????Map<String,Object> map = new HashMap<>(); ???????String fileName = file.getOriginalFilename(); ???????String suffixName = fileName.substring(fileName.lastIndexOf(".")); ???????String newFileName = DateUtil.getCurrentDateStr()+suffixName; ???????FileUtils.copyInputStreamToFile(file.getInputStream(),new File(imageFilePath+newFileName)); ???????map.put("newFileName" ,newFileName); ???????return map; ???}FileUtils.copyInputStreamToFile(file.getInputStream(),new File(imageFilePath+newFileName));
这个方法是commons-io包里面的方法，把得到的文件流复制到对应的路径里面去，还设置文件的名称。
layui的上传图片
原文地址：https://www.cnblogs.com/fuckingPangzi/p/9937777.html