如何将文件发送到服务器使用AngularJS和Spring [英] How to send file to server use AngularJS and Spring

问题描述

按主题行我要上传/发送邮件使用AngularJS和春天有个文件服务器。
当我从客户提交文件包含 $ scope.file =fileURL.jpg，但在服务器接收文件= NULL 和控制台回报：数据= {说明：测试，状态：拒绝} 。
下面是我的code：

我的看法：

 ＆LT;标签类=控制标签COL-SM-4 COL-XS-12为=文件＆gt;请上传的文件：其中，跨度类=需要＆GT; * LT; / SPAN＆GT; ＆LT; /标签＆gt;
＆LT; D​​IV CLASS =COL-XS-4输入-MAX控制＆GT;
    ＆LT;输入类=inline-block的TYPE =文件名称=文件NG-模式=文件数据规则要求的=真正的ID =文件接受=JPG，JPEG格式。 ＆GT;
＆LT; / DIV＆GT;
 

和AngularJs控制器：

  VAR测试= {
        说明：测试，
        状态：拒绝
    };变种FD =新FORMDATA（）;
fd.append（数据，angular.toJson（测试））;
fd.append（文件，$ scope.file）;
$ HTTP（{
    方法：POST，
    网址：'的EmployeeService /员工/数据/文件上传'，
    标题：{'内容类型'：未定义}，
    数据：FD，
    transformRequest：angular.identity
}）
.success（功能（数据，状态）{
                警报（成功）;
}）;
 

春季控制器：

  @ResponseBody
@RequestMapping（值=/数据/文件上传，方法= RequestMethod.POST）
公共字符串postFile（@RequestParam（值=文件，要求= FALSE）MultipartFile文件，
                       @RequestParam（值=数据）的数据对象）抛出异常{
    的System.out.println（数据=+数据）;
    返回OK！;
}
 

解决方案

在HTML：

 ＆LT;输入类型=文件NG-文件选择=onFileSelect（$文件）多重接受=图像/ *＆GT;
 

在JavaScript的：

  $ scope.onFileSelect =功能（$文件）{
    对于（VAR I = 0; I＆LT; $ files.length;我++）{
        var文件= $文件[I]
    VAR测试= {
        说明：测试，
        状态：拒绝
        };
    变种FD =新FORMDATA（）;
    fd.append（数据，angular.toJson（测试））;
    fd.append（文件，文件）;
    $ HTTP（{
        方法：POST，
        网址：'的EmployeeService /员工/数据/文件上传'，
        标题：{'内容类型'：未定义}，
        数据：FD，
        transformRequest：angular.identity
        }）
       .success（功能（数据，状态）{
             警报（成功）;
        }）;
    }
}
 

在服务器：

  @ResponseBody
@RequestMapping（值=/数据/文件上传，方法= RequestMethod.POST）
公共字符串postFile（@RequestParam（值=文件，要求= FALSE）MultipartFile文件，
                       @RequestParam（值=数据）的数据对象）抛出异常{
    的System.out.println（数据=+数据）;
    返回OK！;
}
 

As per subject line I wish to upload/send a file to server using AngularJS and Spring. When i submit file from client it contains $scope.file = "fileURL.jpg", but at the server receives file = null, and the console returns: data = {"description":"Test","status":"REJECTED"}. Below is my code:

I have view:

<label class="control-label col-sm-4 col-xs-12" for="file">Please upload the file : <span class="required">*</span> </label>
<div class="col-xs-4 input-max controls ">
    <input class="inline-block" type="file" name="file" ng-model="file" data-rule-required="true" id="file" accept=".jpg, .jpeg">
</div>

and AngularJs controller:

var test = {
        description:"Test",
        status: "REJECTED"
    };

var fd = new FormData();
fd.append('data', angular.toJson(test));
fd.append("file", $scope.file);
$http({
    method: 'POST',
    url: 'EmployeeService/employee/data/fileupload',
    headers: {'Content-Type': undefined},
    data: fd,
    transformRequest: angular.identity
})
.success(function(data, status) {
                alert("success");
});

Spring controller:

@ResponseBody
@RequestMapping(value = "/data/fileupload", method = RequestMethod.POST)
public String postFile(@RequestParam(value="file", required=false) MultipartFile file,
                       @RequestParam(value="data") Object data) throws Exception {
    System.out.println("data = " + data);
    return "OK!";
}

解决方案

At HTML:

<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">

At JavaScript:

$scope.onFileSelect = function($files) {
    for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
    var test = {
        description:"Test",
        status: "REJECTED"
        };
    var fd = new FormData();
    fd.append('data', angular.toJson(test));
    fd.append("file", file);
    $http({
        method: 'POST',
        url: 'EmployeeService/employee/data/fileupload',
        headers: {'Content-Type': undefined},
        data: fd,
        transformRequest: angular.identity
        })
       .success(function(data, status) {
             alert("success");
        });
    }
}

At server:

@ResponseBody
@RequestMapping(value = "/data/fileupload", method = RequestMethod.POST)
public String postFile(@RequestParam(value="file", required=false) MultipartFile file,
                       @RequestParam(value="data") Object data) throws Exception {
    System.out.println("data = " + data);
    return "OK!";
}

这篇关于如何将文件发送到服务器使用AngularJS和Spring的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！