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从控制器的输入中检索文件名。我，$scope.file = document.getElementById("myFileThingy").value。

RESTLET - 客户端

1 个答案: