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中保存用户不是最好的做法，但现在就是这样。在后端我有控制器，在那个控制器我有方法：

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

对于控制器：

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

}

如何上传带有图像文件的表格，AngularJS spring

1 个答案: