前端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;
    }

测试：

　　

 

 

 

 

 

 搞定