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 或某些原生 Angular 绑定机制绑定到该文件。我不知道为什么，但 Angular 不支持这一点。有两种常见的方法来实现这一点。

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

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