背景:
由於功能需要將文件以及實體,再一次請求中傳遞到後臺,那麼參數就是:文件 + 實體
本文使用的架構:前端angularJS 後臺SSM
主要思路:將實體轉爲字符串,然後和文件組成新的數據。
前端:
頁面板塊:
<div class="col-md-2 title">註冊公告日期</div> <div class="col-md-4 data"> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right" id="datepickerRegTime" ng-model="trademarkInfo.date"> </div> </div> <div class="col-md-2 title">文件上傳</div> <div class="col-md-10 data"> <input type="file" accept=".pdf" name="" id="pdfFile" ng-model="trademarkInfo.pdfPath"> </div>
控制層:
//保存詳細 $scope.save = function(){ var parse = JSON.stringify($scope.trademarkInfo);//此處將實體轉化爲字符串 console.log(parse); adminTrademarkServer.saveTrademark(parse).success(function (response) { }) }
服務層:
this.saveTrademark = function (item) { /* * H5的類:FormData * */ var formData=new FormData(); formData.append("file",pdfFile.files[0]); formData.append("item",item);//將字符串拼接進去 console.log(item); return $http({ method:'POST', url:"/admin/trademark/saveTrademark.do", data: formData, /* * anjularjs對於post和get請求默認的Content-Type header 是application/json。通過設置 * ‘Content-Type’: undefined,這樣瀏覽器會幫我們把Content-Type 設置爲 multipart/form-data. * 通過設置 transformRequest: angular.identity , * anjularjs transformRequest function 將序列化我們的formdata object. * */ headers: {'Content-Type':undefined}, transformRequest: angular.identity }); }
後臺
參數接受:
@PostMapping("/saveTrademark") public QueryResponseResult saveTrademark(@RequestParam("file") MultipartFile file, @RequestParam("item") String item){ System.out.println("接受到實體:" + item + ", 文件名稱:" + file.getOriginalFilename()); Mark mark = JSON.parseObject(item, Mark.class); System.out.println(mark.getTradeName()); return null; }
測試:
搞定