如何在其中使用图像文件上传形式，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中的用户，而是现在。在后端我有控制器，在那个控制器中，我有methode：

@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;}

带有获奖者和固定器以及我需要的一切。因此，当我没有图像的形式时，它可以无问题。但是我也需要图标。我是Angularj的新手，但需要该项目。当我尝试使用formdata((时，我不知道如何使用$资源。因此，如果有人可以帮助我，我会很感激。这是我需要前端工作的第一个项目，所以我丢失了。

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

和控制器：

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