记录是为了更好的成长!
在做一个前后端分离的SSM项目中,需要实现图片的上传,花了好些时间,简单记录一下,供参考:
1、这是我的html页面中表单中的代码,使用的是angular.js进行绑定属性
<form class="form-horizontal" > <input ng-model="entity.bankAccount" type="text" class="form-control"> <select ng-model="entity.bankName" type="text" class="form-control"> <option selected value="">请选择</option> <option ng-repeat="entity in banktypelist" value="{{entity.bankName}}">{{entity.bankName}}</option> </select> <input ng-model="entity.bankCardNo" type="text" class="form-control" placeholder="请输入卡号"> <select ng-model="entity.cId" type="text" class="form-control"> <option selected value="">选择</option> <option ng-repeat="entity in companylist" value="{{entity.cId}}">{{entity.cName}}-{{entity.cMark}}</option> </select> <input id="file" name="pic" type="file" class="form-control" onchange="getPhotoSize(this)"><br> <img id="imghead" alt="" src="/admin/img/logo.png" width="150px" height="150px"/> <button type="submit" class="btn btn-default" ng-click="save()">保存</button> <button type="reset" class="btn btn-default">重填</button>
</form>
2、angular.js的controller中对应的代码
AngularJS默认的'Content-Type'
是application/json
,通过设置'Content-Type': undefined
,这样浏览器不仅帮我们把Content-Type
设置为
multipart/form-data
,还填充上当前的boundary;
通过设置 transformRequest: angular.identity
,anjularjs transformRequest function
将序列化我们的formdata object
,也可以不添加
$scope.save=function(){ var file = document.querySelector('input[type=file]').files[0]; //获取上传到文件 var fd = new FormData(); //封装提交的数据,一并追加到FormData中 fd.append('pic', file); fd.append("bankAccount",$scope.entity.bankAccount); fd.append("bankName",$scope.entity.bankName); fd.append("bankCardNo",$scope.entity.bankCardNo); fd.append("cId",$scope.entity.cId); $http({ method:'POST', //http请求的方法,如get
/post
url:"/bankinfo/add.do", //请求地址 data:fd, //请求的数据,会作为请求体数据被post发送 headers: {'Content-Type':undefined}, //使用angular上传一定要加上这一句,不然传给后台的是空的。 transformRequest: angular.identity }).success( function (response){ //上传成功的操作 if(response.success){ alert("上传成功"); } } ); }
3、java中controller的代码
@RequestMapping("/add") public Result add(BankInfo bankInfo, @RequestParam(value = "pic", required = true) MultipartFile pic,HttpServletRequest request) { System.out.println(bankInfo); //打印出对象信息 System.out.println(pic.getOriginalFilename()); //打印出图片名 //获取路径 String path = request.getSession().getServletContext().getRealPath("/admin/payimgs/"); //获取原来的文件名 String oldName = pic.getOriginalFilename(); //截取获得原来的文件名后缀 String ext = oldName.substring(oldName.lastIndexOf(".")); String newName = UUID.randomUUID().toString()+ext; File f = new File(path,newName); try { //输出到文件夹中 pic.transferTo(f); } catch (IllegalStateException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return new Result(true,"增加成功"); }
以上内容代表个人观点,仅供参考,不喜勿喷。。。