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

Question

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

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

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。

我试过了

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 Framework，而 Slim Framewrok 无法解析 FormData 对象。当我尝试将 FormData 对象发布到一个简单的 PHP 文件中时，它可以工作。但是对于 Slim Framework 3，它不起作用

我试过了

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

Answer 1

您可以发送多部分表单数据，这是一个很棒的plugin，看看这个fiddle，它可以将图像和数据一起发送到您的上传控制器。编辑您的帖子并向我们展示服务器端的内容可以帮助您

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

更改服务器网址并查看数据，您的数据和文件可以一起发送