Angularjs $ HTTP POST文件，表单数据 [英] Angularjs $http post file and form data

问题描述

我在蟒蛇以下要求

 导入请求，JSON，IO饼干= {}
有效载荷= {名：ABC}
URL =/测试
文件=出/ test.json科幻= {'文件'（'文件'，打开（文件））}
R = requests.post（http://192.168.1.1:8080+ URL，数据=有效载荷，文件=网络连接，饼干饼干=）
打印（r.text）
 

其中发送文件和表单字段到后端。我怎么可以这样做（发送文件+表单域）与角$ HTTP。目前，我喜欢这一点，但不知道如何发送文件了。

  VAR有效载荷= {名：ABC};
$ http.post（'/测试，有效载荷）
    .success（功能（RES）{
    //成功
}）;
 

解决方案

我最近写了原生支持多文件上传指令。我创建了解决方案依赖于服务，以填补你的$ HTTP服务标识的差距。我还包含一个指令，它提供了一个简单的API为您的角度模块来使用，以发布文件和数据。

实例：

 ＆LT; LVL文件上传
    自动上传=假
    选择文件按钮文本=选择文件
    上传文件按钮文本=上传文件
    上传的URL =的http：//本地主机：3000 /文件
    MAX-文件= '10'
    最大文件大小-MB =5
    获得-额外的数据='的getData（文件）'
    上做=完成（文件，数据）'
    在建工程='进步（percentDone）'
    对错误='错误（文件类型，MSG）'/＆GT;
 

您可以在github 的 code，并在<一个文档HREF =HTTP：//jasonturim.word$p$pss.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/相对=nofollow>我的博客

这将是由你来处理你的Web框架的文件，但我已经创建了解决方案提供的角度接口获取数据到服务器。你需要写的角code是向上传响应事件

 角
    .module（'应用'，['lvl.directives.fileupload']）
    .controller（CTL'，['$范围'，函数（$范围）{
        $ scope.done =功能（文件，数据} {/ *上传完毕后，做一些事情* /};
        $ scope.progress =功能（percentDone）{/ *当报告进展情况做一些事情* /};
        $ scope.error =功能（文件类型，味精）{/ *做一些事情，如果发生错误* /};
        $ scope.getAdditionalData =函数（）{/ *返回额外的数据被发送到服务器* /};    }）;
 

I have the below request in 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)

which send a file, and form fields to the backend. How can I do the same (sending file + form fields) with Angular $http. Currently, I do like this, but not sure how to send the file too.

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

解决方案

I recently wrote a directive that supports native multiple file uploads. The solution I've created relies on a service to fill the gap you've identified with the $http service. I've also included a directive, which provides an easy API for your angular module to use to post the files and data.

Example usage:

<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)'/>

You can find the code on github, and the documentation on my blog

It would be up to you to process the files in your web framework, but the solution I've created provides the angular interface to getting the data to your server. The angular code you need to write is to respond to the upload events

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*/ };

    });

这篇关于Angularjs $ HTTP POST文件，表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！