时间戳

首页 > 解决方案 > AngularJS：使用 multipart/form-data 上传多个图像

angularjs - AngularJS：使用 multipart/form-data 上传多个图像

问题描述

更新：

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

但是我确实怀疑request-payload中的边界可能与此有关。我也知道浏览器在上传时会更改 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。

标签： angularjsangularjs-directiveimage-uploadingmultipartform-data

解决方案

将两个图像附加到FormData 对象：

$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>

推荐阅读