AngularJS：使用multipart / form-data上传多个图像[重复]

Question

这个问题在这里已有答案：

• AngularJS Upload Multiple Files with FormData API 1回答

更新：

通过multipart / data-form上传多个文件（图像）时，我遇到405错误。我能够在请求中发送图像，似乎我的有效负载显示正确的边界。但是我在提交API和response.status显示405（方法不允许）错误时得到空响应405。我想知道什么可能是错的，因为一切似乎都很好。

但是我怀疑在请求有效负载中可能与边界有关。我还了解到浏览器在上传时会更改MIME-TYPE，这与multipart / formData冲突。

请告知可能出错的地方。以下是我的代码。

指令（文件上传）

myApp.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]);
                });
            });

        }
    };
}]);

查看（html）

<form ng-submit="submit()">
    <input type="text" ng-model="for-param">
    <input type="text" ng-model="for-param">
    <input type="text" ng-model="for-param">

    <input type="file" file-model="image01">
    <input type="file" file-model="image02">

    <button type="submit">Save</button>
</form>

控制器（提交）

$scope.submit = function () {
    var params = {...};
    var data = {
        'frond-side-image' : $scope.image01,
        'back-side-image': $scope.image02
    };

    var formData = new $window.FormData();
    formData.append("image01", $scope.image01);
    formData.append("image02", $scope.image02);

    // Service
    $http({
        method: "POST",
        url: "api-url",
        headers: { "Content-Type": undefined },
        params: params,
        data: formData
    }).then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });
};

基于以上配置，以下是我的请求和响应

标题请求（提交后）

Content-Type: multipart/form-data; boundary=…--------------147472608521363

请求有效负载

-----------------------------1363509831949
Content-Disposition: form-data; name="image01"

stacked_circles.png
-----------------------------1363509831949
Content-Disposition: form-data; name="image01"

stacked_circles.png
-----------------------------1363509831949--

响应

根据上面的配置，我得到空响应，但我得到405错误，这是不允许的方法。

请注意，稍后我会将图像转换为base64以在AWS上传（我只需将图像/ base64发布到后端而不是后端将其上传到AWS）。

---

我为特定查询创建了JSFIDDLE。

Answer 1

将两个图像附加到FormData object：

$scope.submit = function () {
    var params = {};
    var formData = new $window.FormData();
    ̶f̶o̶r̶m̶D̶a̶t̶a̶.̶a̶p̶p̶e̶n̶d̶(̶"̶f̶i̶l̶e̶"̶,̶ ̶d̶a̶t̶a̶)̶;̶
    formData.append("file01", $scope.image01);
    formData.append("file02", $scope.image02);

    // Service
    $http({
        method: "POST",
        url: "api-url",
        headers: { "Content-Type": undefined },
        params: params,
        data: formData
    }).then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });
};

发送文件时，每个文件都需要自己的formData.append调用。

---

请务必使用file-model指令的单个文件版本：

myApp.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(){
                    ̶m̶o̶d̶e̶l̶S̶e̶t̶t̶e̶r̶(̶s̶c̶o̶p̶e̶,̶ ̶e̶l̶e̶m̶e̶n̶t̶[̶0̶]̶.̶f̶i̶l̶e̶s̶)̶;̶
                    modelSetter(scope, element[0].files[0]);
                });
            });

        }
    };
}]);

<form ng-submit="submit()">
    <input type="file" file-model="image01">
    <input type="file" file-model="image02">

    <button type="submit">Save</button>
</form>