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

一尘不染

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

angularjs

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

阅读 232

2020-07-04

共1个答案

一尘不染

我最近写了一条指令，支持本地多个文件上传。我创建的解决方案依赖于服务来填补$
http服务所标识的空白。我还包含了一条指令，该指令为您的angular模块提供了一个易于使用的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*/ };

    });

2020-07-04