javascript - RESTLET - 客户端的 Angular.JS 文件上传

Question

我们在客户端使用 ReSTLet 作为 API，服务器端的所有内容都是用 Laravel 5 编写的。我们在一个部分遇到了问题。我们有几个端点需要您上传文件。在 Angular 中，到目前为止我只使用以下方法使其工作:

var fd = new FormData();
fd.append('image', $scope.file);
$http.post(apiURL + "/upload", fd, {
        transformRequest: angular.identity,
        headers: {
                'Content-Type': undefined
        }
}).then(function(response) {
        //yay it worked
}, function(response) {
        //try again
});

我不知道为什么这是我成功的唯一方法，但我想将其更改为我创建的 ReSTLet 端点。对于我的大多数调用来说，就像这样简单:

$rootScope.restlet.getCompanyAll().then(function(response) {
        $scope.companies = response.data;
});

和

var config = {
    params: {
        start: "2016-01-01",
        end: "2016-01-31"
    }
};
var id = 1;
$rootScope.restlet.getCompanyStatsCompany_id(id, config).then(function(response) {
        $scope.companies = response.data;
});

非常简单，但是当我尝试实现图像发布时，它无法识别它，并且完全忽略了图像。这是我尝试使用的代码，它适用于非 ReSTLet 方式，但不适用于 ReSTLet。

var config = {
    params: {
        name: $scope.newCompany.name,
        rep_id: $scope.newCompany.rep_id,
        image: $scope.image_input
    }
};
var id = 1;
$rootScope.restlet.postCompanyCreate(config).then(function(response) {
        $scope.companies = response.data;
});

有人做过这样的事情吗？如果是这样，它是如何运作的？谢谢! :)

编辑1:

这是我设置的页面的 HTML。它确实有一个文件输入，但由于某种原因，ReSTLet 不喜欢该文件。我尝试过纯文件输入以及带有指令的输入。我使用的当前版本是一个图像，单击时链接到隐藏的文件输入。我目前也在其上使用自定义指令。

HTML:

<div class="modal-body">
    <form ng-submit="createCompany()">
    <!-- OTHER FORM STUFF GOES HERE -->
            <div class="col-sm-12">
                <img src="" id="imagePreview" onClick="$('#imageUpload').trigger('click');" style="max-width: 100%;" />
                <input type="file" style="display: none;" id="imageUpload" file="file" />
            </div>
    <!-- FORM SUBMIT AND RESET BUTTONS HERE -->
    </form>
</div>

自定义指令:

app.directive('file', function() {
        return {
                scope: {
                        file: '='
                },
                link: function(scope, el, attrs) {
                        el.bind('change', function(event) {
                                var file = event.target.files[0];
                                scope.file = file ? file : undefined;
                                scope.$apply();
                        });
                }
        };
});

Answer 1

您没有发布 HTML，但我假设您正在使用具有文件类型的输入来指定要上传的文件，并使用 ng-model 或某些 native Angular 绑定(bind)机制绑定(bind)到该文件。我不知道为什么，但 Angular 不支持这一点。有两种常见的方法可以实现这一点。

第一个是使用解决此问题的指令。这里有一个:https://github.com/danialfarid/ng-file-upload 。

第二个，至少是我要开始的地方，是您可以简单地使用 document.getElementById 从 Controller 的输入中检索文件名。 IOW，$scope.file = document.getElementById("myFileThingy").value。