前后端分离实现图片上传的功能

由于最近开发的项目需要有上传图片的功能，并且能够让上传的图片能够在网页上预览出来。所以写下此篇文章，记录一下学习到的知识。
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)效果页面展示