Question

我有点困惑如何使用基本形式的角度来访问文件数据。我正在追踪：（https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs）和youtube（https://www.youtube.com/watch?v=vLHgpOG1cW4）。他们似乎做对了，但是当我尝试的时候，似乎采取了不同的方式。无论如何，这是我的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":"robie@godfather.com","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及其所有字段上的“必需”报告验证错误，表明发送了一个空对象。提前谢谢。

Answer 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: "robie@godfather.com", file: File}
> Object

注意file: File因此，我可以像submit()或console.log(file.name)或console.log(file.type)一样访问console.log(file.size)中的文件内容/对象。我不知道为什么我一直想念它。我希望有人从我的错误中吸取教训。

Answer 2

可能是该表单需要属性enctype =“multipart / form-data”。

Angularjs Image Upload显示空嵌套对象

2 个答案: