前端angularjs傳文件和實體

背景:

  由於功能需要將文件以及實體,再一次請求中傳遞到後臺,那麼參數就是:文件 +  實體

  本文使用的架構:前端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;
    }

測試:

  

 

 

 

 

 

 搞定

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章