layui的上傳圖片
阿新 • • 發佈:2018-11-10
前臺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包裡面的方法,把得到的檔案流複製到對應的路徑裡面去,還設定檔案的名稱。