由于最近開發的項目需要有上傳圖片的功能，并且能夠讓上傳的圖片能夠在網頁上預覽出來。所以寫下此篇文章，記錄一下學習到的知識。
1，前端
前端項目是采用angularjs框架搭建的。圖片上傳功能在前端的代碼分布在兩個部分，一部分是圖片上傳頁面的表單代碼，一部分是在對應的controller中的代碼。下面對這兩方面代碼進行展示。
(1)頁面代碼

<form class="form-horizontal" role="form" id="editForm"name="editForm" ng-model="editForm" novalidate><div class="form-group"><label class="col-xs-3 col-sm-3 control-label no-padding-right"><span class="red">*</span>菜單ID</label><div class="col-xs-6 col-sm-6"><input type="text" ng-model="dataItem.menuId" class="col-xs-9 col-sm-9" readonly /></div><div class="space-4"></div></div><div class="form-group"><label class="col-xs-3 col-sm-3 control-label no-padding-right"><span class="red">*</span>圖片預覽</label><div class="col-xs-6 col-sm-6"><div class="col col-sm-4 text-left"><img id="imgadd" width="300px" ng-src="{{contextPath}}/showImg?path={{dataItem.imgAddress}}"style="width:200px; height: 200px; max-width:500px;" onerror ="this.src='modules/moi/views/default404.png'"/></div></div><div class="space-4"></div></div><div class="form-group"><label class="col-xs-3 col-sm-3 control-label no-padding-right"><span class="red">*</span>菜單圖標</label><div class="col-xs-6 col-sm-6"><input type="text" size="20" name="upfile" id="upfile"class="col-sm-8" ng-value="photofiles.value"/>&nbsp;<button class="btn btn-warning btn-sm" onclick="file.click()"class="col-sm-1">選擇</button><input id="file" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" name="photofiles"ng-model="dataItem.imgAddress" style="display: none;"onchange="upfile.value=this.value" /><button class="btn btn-info btn-sm" ng-click="lookImg()"class="col-sm-1">預覽</button></div><div class="space-4"></div></div></form>

(2)controller代碼

//對修改后的菜單進行保存$scope.saveInfo=function(){var menuId=$scope.dataItem.menuId;var imgAddress=$scope.dataItem.imgAddress;var imgFlag="1";var reg = /^[0-9]+.?[0-9]*$/;if(menuName == null || menuName == ""){$alert.info({'message' : '菜單名稱不能為空！'});}else if(showOrder!=''&&!reg.test(showOrder)){$alert.info({'message' : '檢查順序號是否為數字！'});} else{var file = document.getElementById("file").files;// 使用FormData對象類型向后臺傳文件var fd = new FormData(document.getElementById("editForm"));if(file.length==0){imgFlag="0";}else{imgFlag="1";}$http({method:'post',url:SpringBootWebApp.contextPath +"alterMenu",data:fd,contentType : 'application/json',headers : {'Content-Type' : undefined},params:{"menuId":menuId,"imgAddress":imgAddress,"imgFlag":imgFlag}}).success(function(data){if(data.Code=="0"){$alert.tip(data.Msg);}else{$alert.tip_error(data.Msg);}//設置返回函數$scope.goToList();}).error(function(data){alert(data.error);});}}//返回菜單列表方法$scope.goToList = function() {$location.path('/bankAdmin/hos_menu/list');}//預覽圖片的方法$scope.lookImg=function(){var result=document.getElementById("imgadd");var file=document.getElementById("file").files;if(file.length==0){$alert.error({message:"請選擇一張圖片！"});return;}if(typeof FileReader==='undefined'){result.innerHTML="抱歉，你的瀏覽器不支持 FileReader";file.setAttribute('disabled','disabled');}else{var reader=new FileReader();reader.readAsDataURL(file[0]);reader.onload = function(e){result.src=reader.result;}}}

2,后端代碼
(1)controller層

@RequestMapping(value="/alterMenu",method = RequestMethod.POST)public Map<String,String> altermenu(@RequestParam String menuId,@RequestParam(required = false,defaultValue = "") String imgAddress,@RequestParam(required = false,defaultValue = "") String imgFlag, @RequestParam(name = "photofiles",required = false,defaultValue = "")MultipartFile file){return service.altermenu(menuName,menuId,showOrder,imgAddress,imgFlag,file);}

(2)service層

public Map<String,String> altermenu(String menuId,String imgAddress,String imgFlag,MultipartFile file){//查找對應菜單id的菜單HosMenu hosMenu = hosMenuRepository.findByMenuId(menuId);//設置圖片名稱String finename =menuId+".jpg";//判斷圖片是否有路徑傳入if("1".equals(imgFlag)){//對圖片進行保存createImgpath(hosMenu,finename,file);}else {//無新圖上傳則直接保存先前圖片地址hosMenu.setImgAddress(imgAddress);}Map<String,String> resultMap = new HashMap<>();resultMap.put("Code","0");resultMap.put("Msg","修改成功！");//保存hosMenuRepository.save(hosMenu);return resultMap;}//創建上傳的圖片路徑public void createImgpath(HosMenu hosMenu,String fileName,MultipartFile file ){//根據hospitalmenu/菜單id 來建立圖片路徑String relativeFilePath="hospitalmenu/"+hosMenu.getMenuId()+"/";hosMenu.setImgAddress(relativeFilePath+fileName);//保存訪問的路徑String saveFilePath = SystemParameterService.getInstance().getParameterValue("path-photofiles") + relativeFilePath;File fileDir = new File(saveFilePath);if (!fileDir.exists()) {// 構建層級目錄fileDir.mkdirs();}// 保存圖片String filePath = saveFilePath + fileName;saveImg(filePath,file);}//圖片資源保存public void saveImg(String filePath, MultipartFile file){// 保存圖片try {FileOutputStream out = new FileOutputStream(filePath);BufferedInputStream is = new BufferedInputStream(file.getInputStream());int count = 0;byte[] buffer = new byte[1024];// 一個一個字節的讀取并寫入while ((count = is.read(buffer)) != (-1)) {out.write(buffer, 0, count);}out.flush();out.close();is.close();} catch (Exception e) {e.printStackTrace();}}

(3)效果頁面展示

總結

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

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