Layui框架實(shí)現(xiàn)圖片上傳

前言：

一直以來(lái)，圖片上傳總是件很麻煩的事。最近在學(xué)layui，發(fā)現(xiàn)layui真是極大簡(jiǎn)化了各種復(fù)雜的操作，避免了繁瑣的開(kāi)發(fā)。
layui圖片上傳和傳統(tǒng)的圖片上傳不同，它并不予表單元素并存，而是單獨(dú)通過(guò)異步來(lái)上傳到后端，繼而進(jìn)行之后的操作。所以，編寫表單代碼時(shí)，并不需要添加enctype=“multipart/form-data” 和 input type=“file” 相關(guān)組件了，直接寫最原始的表單就行。

附上完整demo：https://github.com/BraisedPanda/StudentSystem2.5 demo里面新建人員中有圖片導(dǎo)入功能，static下的sql文件夾里有完整的數(shù)據(jù)庫(kù)表和測(cè)試數(shù)據(jù)，登錄界面登錄名：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="請(qǐng)?zhí)顚?到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><!--************這里是上傳圖片的代碼***************--><!--************這里添加的隱藏的輸入框，用來(lái)傳遞images的參數(shù)***************--><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、白色的是隱藏的輸入框，用來(lái)傳遞images的src地址的，因?yàn)閳D片不同于表單一起傳數(shù)據(jù)，所以只能借助js代碼來(lái)綁定參數(shù)
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(){//演示失敗狀態(tài)，并實(shí)現(xiàn)重傳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代碼重點(diǎn)是黃色框子里的內(nèi)容
fileupload.attr(“value”,res.data.src);
res.data.src是獲取后端傳過(guò)來(lái)的圖片的url,之后給表單的隱藏圖片輸入框賦值即可。

后端代碼：

//圖片上傳測(cè)試@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、后端代碼就按照以前傳統(tǒng)的圖片上傳代碼來(lái)寫就行，唯一區(qū)別的就是向前端傳一個(gè)json串，json串里包括圖片的url地址

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

效果展示：

前端頁(yè)面：

數(shù)據(jù)庫(kù)：

詳細(xì)見(jiàn)官方文檔：https://www.layui.com/doc/modules/upload.html

前面的demo內(nèi)容預(yù)覽

預(yù)覽

登錄界面

學(xué)生列表

班級(jí)列表

添加學(xué)生

我的考試成績(jī)

各班級(jí)考試成績(jī)

所有角色一覽

各角色對(duì)應(yīng)的權(quán)限

新建權(quán)限角色（可定制可觀看的菜單和對(duì)應(yīng)的操作按鈕）

授予某個(gè)用戶權(quán)限

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。