Angularjs $ http发布文件和表单数据

Question

我在python中有以下请求

import requests, json, io

cookie = {}
payload = {"Name":"abc"}
url = "/test"
file = "out/test.json"

fi = {'file': ('file', open(file) )}
r = requests.post("http://192.168.1.1:8080" + url, data=payload, files=fi, cookies=cookie)
print(r.text)

它将文件和表单字段发送到后端.如何使用Angular $ http执行相同的操作(发送文件+表单字段).目前,我喜欢这个,但不知道如何发送文件.

var payload = {"Name":"abc"};
$http.post('/test', payload)
    .success(function (res) {
    //success
});

Answer 1

当必须上传文件并同时发送用户令牌信息时,我遇到了类似的问题.transformRequest随着形成FormData帮助:

        $http({
            method: 'POST',
            url: '/upload-file',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: {
                email: Utils.getUserInfo().email,
                token: Utils.getUserInfo().token,
                upload: $scope.file
            },
            transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                var headers = headersGetter();
                delete headers['Content-Type'];

                return formData;
            }
        })
        .success(function (data) {

        })
        .error(function (data, status) {

        });

为了获取文件$scope.file我使用自定义指令:

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

HTML:

<input type="file" file="file" required />

Answer 2

在发布到Web.Api应用程序时,我无法让Pavel的答案正常工作.

问题似乎是删除标题.

headersGetter();
delete headers['Content-Type'];

为了确保允许浏览器将Content-Type与边界参数一起默认,我需要将Content-Type设置为undefined.使用Pavel的示例,从未设置边界,从而导致400 HTTP异常.

关键是删除删除上面显示的标题的代码,并手动将标题内容类型设置为null.从而允许浏览器设置属性.

headers: {'Content-Type': undefined}

这是一个完整的例子.

$scope.Submit = form => {
                $http({
                    method: 'POST',
                    url: 'api/FileTest',
                    headers: {'Content-Type': undefined},
                    data: {
                        FullName: $scope.FullName,
                        Email: $scope.Email,
                        File1: $scope.file
                    },
                    transformRequest: function (data, headersGetter) {
                        var formData = new FormData();
                        angular.forEach(data, function (value, key) {
                            formData.append(key, value);
                        });
                        return formData;
                    }
                })
                .success(function (data) {

                })
                .error(function (data, status) {

                });

                return false;
            }

Answer 3

我最近写了一个支持本机多文件上传的指令.我创建的解决方案依赖于服务来填补您使用$ http服务识别的差距.我还添加了一个指令,它为角度模块提供了一个简单的API,用于发布文件和数据.

用法示例:

<lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>

你可以在github上找到代码,在我的博客上找到文档

您可以自行处理Web框架中的文件,但我创建的解决方案提供了将数据提供给服务器的角度接口.您需要编写的角度代码是响应上传事件

angular
    .module('app', ['lvl.directives.fileupload'])
    .controller('ctl', ['$scope', function($scope) {
        $scope.done = function(files,data} { /*do something when the upload completes*/ };
        $scope.progress = function(percentDone) { /*do something when progress is reported*/ };
        $scope.error = function(file, type, msg) { /*do something if an error occurs*/ };
        $scope.getAdditionalData = function() { /* return additional data to be posted to the server*/ };

    });