Javascript RESTLET-在客户端上传Angular.JS文件

我们在客户端使用Restlet作为API，服务器端的所有内容都是用Laravel5编写的。我们的一部分有问题。我们有两个端点要求您上传文件。在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;
});

及

非常简单，但是当我尝试实现一个图像的post时，它无法识别它，并且完全忽略了图像。下面是我尝试使用的代码，它可以使用非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:

---

您没有发布HTML，但我假设您使用的是带有文件类型的输入来指定要上载的文件，并使用ng模型或某些本机角度绑定机制绑定到该文件。我不知道为什么，但Angular不支持这一点。有两种常见的实现方法

第一个是使用一个围绕这个问题的指令。这里有一个：

---

第二个，至少我要从这里开始，就是您可以简单地使用document.getElementById从控制器中的输入检索文件名。现在，

$scope.file=document.getElementById（“myFileThingy”）.value

您没有发布HTML，但我假设您使用的是带有文件类型的输入来指定要上载的文件，并使用ng模型或某些本机角度绑定机制绑定到该文件。我不知道为什么，但Angular不支持这一点。有两种常见的实现方法

第一个是使用一个围绕这个问题的指令。这里有一个：

---

第二个，至少我要从这里开始，就是您可以简单地使用document.getElementById从控制器中的输入检索文件名。现在，

$scope.file=document.getElementById（“myFileThingy”）.value

我已经编辑了这个问题，将我的HTML和我当前使用的自定义指令一起包含进去。忽略难看的间距，堆栈溢出对选项卡做了一些奇怪的事情。不过我没有想过使用原生JS来获取文件。这看起来很简单，因为。。。然后再一次。。。我对任何有效的方法都很失望。是的，document.getElementById方法非常有效。我曾考虑过创建一个只执行此操作的指令，但还没有开始执行它。我有一个自定义指令，它几乎可以执行相同的操作，但使用

event.target.files[0]

获取文件并将其设置为

$scope.file

变量。（或您在

file=“variablename”

部分中输入的任何内容）。问题是，它适用于本机Angular，但由于某些原因，它不适用于Restlet API。我已经编辑了这个问题，将我的HTML与我当前使用的自定义指令一起包括在内。忽略难看的间距，堆栈溢出对选项卡做了一些奇怪的事情。不过我没有想过使用原生JS来获取文件。这看起来很简单，因为。。。然后再一次。。。我对任何有效的方法都很失望。是的，document.getElementById方法非常有效。我曾考虑过创建一个只执行此操作的指令，但还没有开始执行它。我有一个自定义指令，它几乎可以执行相同的操作，但使用

event.target.files[0]

获取文件并将其设置为

$scope.file

变量。（或您在

file=“variablename”

部分中输入的任何内容）。问题是，它适用于本机Angular，但由于某些原因，不适用于Restlet API。

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;
});

<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();
                        });
                }
        };
});