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(); }); } }; });，我使用了自定义指令：

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

HTML：

{{1}}

Answer 2

我无法让Pavel的回答与发布到Web.Api应用程序时一样。

问题似乎在于删除标题。

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

您可以找到code on github以及my blog

上的文档

由您来处理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*/ };

    });

Answer 4

您也可以使用HTML5上传。您可以使用此AJAX uploader。

JS代码基本上是：

  $scope.doPhotoUpload = function () {
    // ..
    var myUploader = new uploader(document.getElementById('file_upload_element_id'), options);
    myUploader.send();
    // ..
  }

从HTML输入元素中读取

<input id="file_upload_element_id" type="file" onchange="angular.element(this).scope().doPhotoUpload()">

Answer 5

这是我的解决方案：

// Controller
$scope.uploadImg = function( files ) {
  $scope.data.avatar = files[0];
}

$scope.update = function() {
  var formData = new FormData();
  formData.append('desc', data.desc);
  formData.append('avatar', data.avatar);
  SomeService.upload( formData );
}


// Service
upload: function( formData ) {
  var deferred = $q.defer();
  var url = "/upload"	;
  
  var request = {
    "url": url,
    "method": "POST",
    "data": formData,
    "headers": {
      'Content-Type' : undefined // important
    }
  };

  console.log(request);

  $http(request).success(function(data){
    deferred.resolve(data);
  }).error(function(error){
    deferred.reject(error);
  });
  return deferred.promise;
}


// backend use express and multer
// a part of the code
var multer = require('multer');
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../public/img')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.jpg');
  }
})

var upload = multer({ storage: storage })
app.post('/upload', upload.single('avatar'), function(req, res, next) {
  // do something
  console.log(req.body);
  res.send(req.body);
});

<div>
  <input type="file" accept="image/*" onchange="angular.element( this ).scope().uploadImg( this.files )">
  <textarea ng-model="data.desc" />
  <button type="button" ng-click="update()">Update</button>
</div>

Answer 6

您可以在http://ngmodules.org/modules/ngUpload

中讨论其他解决方案file uploader integration for angularjs

Answer 7

在我的解决方案中，我有

$scope.uploadVideo = function(){
    var uploadUrl = "/api/uploadEvent";


    //obj with data, that can be one input or form
    file = $scope.video;
    var fd = new FormData();


    //check file form on being
    for (var obj in file) {
        if (file[obj] || file[obj] == 0) {
            fd.append(obj, file[obj]);
        }
    }

    //open XHR request
    var xhr = new XMLHttpRequest();


    // $apply to rendering progress bar for any chunking update
    xhr.upload.onprogress = function(event) {
        $scope.uploadStatus = {
            loaded: event.loaded,
            total:  event.total
        };
        $scope.$apply();
    };

    xhr.onload = xhr.onerror = function(e) {
        if (this.status == 200 || this.status == 201) {

            //sucess

            $scope.uploadStatus = {
                loaded: 0,
                total:  0
            };


            //this is for my solution
            $scope.video = {};
            $scope.vm.model.push(JSON.parse(e.currentTarget.response));
            $scope.$apply();

        } else {
           //on else status
        }
    };

    xhr.open("POST", uploadUrl, true);

    //token for upload, thit for my solution
    xhr.setRequestHeader("Authorization", "JWT " + window.localStorage.token);


    //send
    xhr.send(fd); 
};

}

Answer 8

请看看我的实施情况。您可以将以下函数包装到服务中：

function(file, url) {
  var fd = new FormData();

  fd.append('file', file);

  return $http.post(url, fd, {
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined }
  });
}

请注意，file参数是Blob。如果您拥有base64个版本的文件，则可以像以下一样轻松更改为Blob：

fetch(base64).then(function(response) {
  return response.blob(); 
}).then(console.info).catch(console.error);

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

8 个答案: