Я немного смущен, как получить доступ к файлам данных, используя угловые из базовой формы. Я следую за: (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 и его ошибки проверки достоверности "обязательно" во всех полях, предлагая туда отправленный пустой объект. Заранее спасибо.
Я добавил метод 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)
, Я не знаю, почему я все это время пропадал. Надеюсь, кто-то узнает из моей ошибки.
Может быть, эта форма требует атрибута enctype = "multipart/form-data".
enctype="multipart/form-data"
но та же проблема.