Layui框架實現圖片上傳

前言：

一直以來，圖片上傳總是件很麻煩的事。最近在學layui，發現layui真是極大簡化了各種復雜的操作，避免了繁瑣的開發。
layui圖片上傳和傳統的圖片上傳不同，它并不予表單元素并存，而是單獨通過異步來上傳到后端，繼而進行之后的操作。所以，編寫表單代碼時，并不需要添加enctype=“multipart/form-data” 和 input type=“file” 相關組件了，直接寫最原始的表單就行。

附上完整demo：https://github.com/BraisedPanda/StudentSystem2.5 demo里面新建人員中有圖片導入功能，static下的sql文件夾里有完整的數據庫表和測試數據，登錄界面登錄名：zhangsan 密碼：123

前端代碼：

<form class="layui-form" action="/add_user" method="post"><div class="layui-form-item"><label class="layui-form-label">用戶名:</label><div class="layui-input-block"><input type="text" name="username" lay-verify="username" placeholder="填寫用戶名" autocomplete="off" class="layui-input username"></div></div><div class="layui-form-item"><label class="layui-form-label">密碼:</label><div class="layui-input-block"><input type="text" name="password" lay-verify="password" placeholder="請填寫6到12位密碼" autocomplete="off" class="layui-input password"></div></div><div class="layui-form-item"><label class="layui-form-label ">性別:</label><div class="layui-input-block"><input type="radio" name="gender" value="man" title="男" checked=""><input type="radio" name="gender" value="woman" title="女"></div></div><!--************這里是上傳圖片的代碼***************--><!--************這里添加的隱藏的輸入框，用來傳遞images的參數***************--><input type="hidden" name="images" class="image"><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"><p id="demoText"></p></div></div></div><!--************上面里是上傳圖片的代碼***************--><br><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="demo1">修改</button>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<button type="reset" class="layui-btn layui-btn-radius layui-btn-danger">重置</button></div></div><br> </form>

tips:

1、白色的是隱藏的輸入框，用來傳遞images的src地址的，因為圖片不同于表單一起傳數據，所以只能借助js代碼來綁定參數
2、黃色框子里就是上傳圖片的組件了，可以把它夾在form表單中

js代碼

<script>layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通圖片上傳var uploadInst = upload.render({elem: '#test1',url: '/upload/',accept:'images',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();});}});}); </script>

tips

1、js代碼重點是黃色框子里的內容
fileupload.attr(“value”,res.data.src);
res.data.src是獲取后端傳過來的圖片的url,之后給表單的隱藏圖片輸入框賦值即可。

后端代碼：

//圖片上傳測試@ResponseBody@RequestMapping("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 = "D:\\mycode\\LayUiTest\\src\\main\\resources\\static\\images\\" + dateStr+"\\"+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","/images/"+ dateStr+"/"+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;}

tips:
1、后端代碼就按照以前傳統的圖片上傳代碼來寫就行，唯一區別的就是向前端傳一個json串，json串里包括圖片的url地址

這樣，整個流程就完成了，其中最關鍵的就是后端代碼了。
流程：圖片先自己上傳到后端
——》后端存儲圖片，并把存儲地址給前端
——》前端的js代碼獲取到后端傳來的圖片存儲地址，把這個url賦值給表單中的隱藏的圖片輸入項
——》圖片輸入框中有了地址，并隨著表單其他內容一起提交~

效果展示：

前端頁面：

數據庫：

詳細見官方文檔：https://www.layui.com/doc/modules/upload.html

前面的demo內容預覽

預覽

登錄界面

學生列表

班級列表

添加學生

我的考試成績

各班級考試成績

所有角色一覽

各角色對應的權限

新建權限角色（可定制可觀看的菜單和對應的操作按鈕）

授予某個用戶權限

總結

以上是生活随笔為你收集整理的Layui框架实现图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。