在Angular JS中同时发送表单数据和上传文件

Sending form data and uploading file at the same time in Angular JS

本文关键字：数据 表单 文件 JS Angular      更新时间：2023-09-26

我在网上尝试了所有的解决方案，但都没有成功。

我可以使用Angular JS上传图像文件。但是这次我需要额外的值来保存服务器上的图像。我正在尝试发送两个数组。其中一个将是文件项，另一个将是包含文件夹信息的简单post数据。

subjectDetails.addData = function(post_value){
    var defer = $q.defer();
    var fd = new FormData();
    fd.append('files', post_value.files);
    fd.append('data', post_value.data);
    //fd.append("data", 'something');
    //fd.append("data", JSON.stringify(post_value.data));

    $http.post($rootScope.defaultApiPath + '/saveItem', fd, {
        withCredentials : false,
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(response, status){
        defer.resolve(response);
    })
    .error(function(error, status){
        defer.reject(error);
    });

    return defer.promise;
};

当我发布它，我可以得到$_FILES的图像文件，但$_POST变量为NULL。

I tried 

var_dump($_POST); //NULL
var_dump($_POST['data']); //NULL
var_dump($_FILES); //shows only the file info. The other array is not in it

编辑

我找到原因了。问题不在于javascript。我在服务器端使用Slim框架，Slim框架不能解析FormData对象。当我尝试将FormData对象发布到一个简单的PHP文件中时，它工作了。但是在Slim Framework 3中，它不起作用

我试着

$request->getBody(); //Still NULL
$request->getParsedBody(); //Still Null

你可以发送多部分的表单数据，这是一个伟大的插件，看看这个fiddle，这可以发送图像和数据一起到你的上传控制器。编辑你的帖子，告诉我们服务器端有什么可以帮助你的

 file.upload = Upload.upload({
      url: 'YOUR UPLOAD URL GOES HERE',
      data: {username: $scope.username, file: file},
    });

更改服务器url并查看数据，您的from data和file都可以一起发送

相关文章：