Angularjs Image Upload показывает пустой вложенный объект

0

Я немного смущен, как получить доступ к файлам данных, используя угловые из базовой формы. Я следую за: (https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs) и youtube (https://www.youtube.com/watch?v=vLHgpOG1cW4). Кажется, они понимают это правильно, но когда я пытаюсь, кажется, идет по-другому. Anyways здесь моя форма HTML:

<form>
    <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text" ng-model="customer.name" id="name" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" ng-model="customer.email" id="name" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="file">Image</label>
        <input type="file" file-model="customer.file" id="file" class="form-control"/>
    </div>
    <div class="form-group">
        <button type="submit" ng-click="submit()" class="btn btn-primary">Submit</button>
    </div>
</form>

И Директива

app.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

И, наконец, контроллер:

app.controller('CustomerController', ['$scope','CustomerService', function($scope, CustomerService){
    $scope.customer = {};
    CustomerService.save($scope.customer);
}]);

Когда я {{ customer }} на мой взгляд, получаю что-то вроде этого:

{"name":"Robert DeNiro","email":"[email protected]","file":{}}

Это пустой пустой "file":{} который вызывает у меня проблемы с получением значений для отправки на сервер.

Вот мой код обслуживания клиентов:

var CustomerService = function($resource) {

        return $resource('advertisements/:id', { id: '@_id' }, {
            update: {
                method: 'PUT' // this method issues a PUT request
              },
        save: {
            method: 'post',
            transformRequest: angular.identity,
            'Content-Type': undefined
        }
    });
    };

    CustomerService.$inject = ['$resource'];
    app.service('CustomerService', CustomerService);

Я использую Laravel 5.1 и его ошибки проверки достоверности "обязательно" во всех полях, предлагая туда отправленный пустой объект. Заранее спасибо.

Теги:
file-upload
laravel-5
angularjs-directive

2 ответа

2
Лучший ответ

Я добавил метод submit() в CustomerController следующим образом:

$scope.submit = function(){
    var file = $scope.customer.file;
    console.log('file is ' );
    console.log(file.name);
    console.log($scope.customer.file);
    console.dir($scope.customer.file);
};

И там вы можете увидеть, что я пытался экспериментировать с console.log() и console.dir() и я, кажется, получаю результаты. Например, если я console.log($scope.customer) или console.dir($scope.customer) он дает мне вложенный файловый объект со всеми файлами. И это выглядит так:

> Object {name: "robert deniro", email: "[email protected]", file: File}
> Object

file: File примечания file: File Поэтому я могу получить доступ к содержимому/объекту файла в submit() следующим образом: console.log(file.name) или console.log(file.type) или console.log(file.size), Я не знаю, почему я все это время пропадал. Надеюсь, кто-то узнает из моей ошибки.

  • 0
    это выглядит глупо, но это действительно работает. Я не знаю, почему мы должны применять var file = $ scope.file; но это работает. Любые идеи, почему мы должны присвоить его переменной?
0

Может быть, эта форма требует атрибута enctype = "multipart/form-data".

  • 0
    добавлен enctype="multipart/form-data" но та же проблема.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню