java - 如何上传其中包含图像文件的表单，AngularJS spring

Question

我有这个表格

<div class="row">
<h1 class="page-header">
    Create
</h1>
<form ng-submit="create()", enctype="multipart/form-data">
    <div class="form-group">
        <label>Name:</label>
        <input type="text" ng-model="subforum.name" class="form-control" />
    </div>
    <div class="form-group">
        <label>Desc:</label>
        <input type="text" ng-model="subforum.desc" class="form-control" />
    </div>

    <input type="file" ngf-select ng-model="subforum.icon" name="subforum.icon"
           accept="image/*" ngf-max-size="2MB" required
           ngf-model-invalid="errorFile">
    <img ng-show="myForm.file.$valid" ngf-thumbnail="subforum.icon" class="thumb"> <button ng-click="subforum.icon= null" ng-show="subforum.icon">Remove</button>

    <button class="btn btn-success" type="submit">Create</button>
</form>

``

在我的 JS 中

.config(function($stateProvider) {
$stateProvider.state('create', {

url:'/subforum/create',
        views: {
            'main': {
                templateUrl:'subforum/create.tpl.html',
                controller: 'CreateCtrl'
            }
        },
        data : { pageTitle : "Create Subforum" }

})

和

.factory('subforumService', function($resource) {
var service = {};

service.create = function (subforum, success, failure) {
        var SubForum= $resource ("/web-prog/rest/subforums");

        SubForum.save({}, subforum, success, failure) ;
    };

.controller("CreateCtrl", function($scope, $state, subforumService) {
$scope.create = function() {


    $scope.subforum.author = JSON.parse(localStorage.getItem ("logedUser"));
    subforumService.create($scope.subforum,
    function(returnedData) {
        $state.go("home");

    },
    function() {
        alert("Error creating");
    });
};

我知道这不是将用户保存在 LocalStorage 中的最佳实践，但目前就是这样。在后端我有 Controller ，在该 Controller 中我有方法:

@RequestMapping(method = RequestMethod.POST)
public ResponseEntity<SubForumResource> createPodforum(@RequestBody SubForumResource sentPodforum) {

}

而 SubForumResource 是

public class PodforumResource extends ResourceSupport {

private String name;

private String desc;

private byte[] icon;}

有 geters 和 seters 以及我需要的一切。因此，当我有没有图像的表格时，它可以毫无问题地工作。但我也需要图标。我对 AngularJS 很陌生，但这个项目需要它。当我尝试使用 FormData() 时，我不知道如何使用 $resource。因此，如果有人可以帮助我，我将不胜感激。这是我的第一个项目，我需要在前端工作，所以我迷路了。

Answer 1

您可以引用下面的 angularjs 代码:

this.addEmployee = function (requestData, file) {
    var data = new FormData();
    data.append('file', file[0]);
    data.append('requestData', new Blob([JSON.stringify(requestData)], {
        type: "application/json"
    }));

    var config = {
        transformRequest: angular.identity,
        transformResponse: angular.identity,
        headers: {
            'Content-Type': undefined
        }
    }
    var url =  "http://localhost:8080/addEmployee";
    var promise1 = $http.post(url, data, config);
    var promise2 = promise1.then(function (response) {
        return response.data;
    },
        function errorCallback(response) {
            alert(response.data.errorMessage);
        });
    return promise2;
}

对于 Controller :

@RequestMapping(value = "/addEmployee", method = RequestMethod.POST, consumes = {"multipart/form-data" })
@CrossOrigin
public CustomResponse addEmployee(@RequestPart("file") MultipartFile file, @RequestPart("requestData") Employee emp) {

}