如何在其中上传带有图像文件的表单，AngularJS春季 [英] How to upload form with image file in it, AngularJS spring

问题描述

我有这张表格

<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:

I know thats not best practice to save user in LocalStorage but for now its like that. On backend i have controller and in that controller i have methode:

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

}

和SubForumResource是

and SubForumResource is

public class PodforumResource extends ResourceSupport {

private String name;

private String desc;

private byte[] icon;}

带有获取器和设置器以及我需要的一切. 因此，当我有没有图像的表单时，它就不会出现问题.但是我也需要图标.我是angularjs的新手，但此项目需要它.当我尝试使用FormData()时，我不知道如何使用$ resource.因此，如果有人可以帮助我，我将非常感激.这是我的第一个目标，我需要工作在前端，这样我就迷失了.

with geters and seters and everything i need. So when i have form without image it works without problems. But i need icon too. Im new to angularjs but need it for this project. When i try to use FormData() i dont know how to use $resource. So if someone can help me i would be thankful. This is my first prject i need to work front end so im lost.

推荐答案

您可以参考以下angularjs代码:

You can refer below code for 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春季的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！