Question

我目前的情况是：我正在做嵌套重复，如下所示：

$scope.uploadPic = function(file) 
{

    alert($scope.taskdetails.id);       //task_id e.g 21
    alert($rootScope.job_id);   //job_id e.g 12
    file.upload = Upload.upload(
    {
      url: 'http://localhost/mobile-data/upload_file.php',
      data: {
                file: file,
                task_id: $scope.taskdetails.id,
                job_id: $rootScope.job_id
            },

    });
    file.upload.then(function (response) {
      $timeout(function () {
        file.result = response.data;
      });
    }, function (response) {
      if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
    }, function (evt) {
      // Math.min is to fix IE which reports 200% sometimes
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
}

但在我的upload_file.php我无法收到以下值：

task_id: $scope.taskdetails.id,
job_id: $rootScope.job_id

在console.log他们工作正常。但在服务器端它没有收到。这是我的upload_file.php

的代码

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('content-type: application/json; charset=utf-8');
$_POST = json_decode(file_get_contents('php://input'), true);

$task_id = $_POST["task_id"];
$file = $_FILES["file"];
$job_id = $_POST["job_id"];
var_dump($task_id);
var_dump($job_id);

但在var_dump上只会打印null。帮助我正确接收值..

Answer 1

您可以验证实际发送到服务器的内容吗？（您可以在大多数浏览器中使用F12开发工具执行此操作。）

data.file的类型是什么？在查看你的php代码时，我假设你正在向服务器发送一个json对象，所以我猜测浏览器无法将file序列化为json对象，并最终发送一个空请求给服务器。要解决此问题，您可以将文件读取为base64数据，以便您可以将其作为字符串发送到json数据对象中：

var data = {
    file: '',
    task_id: $scope.taskdetails.id,
    job_id: $rootScope.job_id
};

if($window.FileReader) {
    var reader = new FileReader();
    reader.onloadend = function() {
        data.file = reader.result;

        $http.post('http://localhost/mobile-data/upload_file.php', data);
    }
    reader.readAsDataURL(file);
}

然后该文件将作为格式为data:image/png;base64,...的字符串发送到服务器（您可以在F12工具中看到这一点）。

到了php，这个base64字符串需要被解码才能找回文件：

$_POST = json_decode(file_get_contents('php://input'), true);
$task_id = $_POST['task_id'];
$job_id = $_POST['job_id'];

if(isset($_POST['file']) && ($_POST['file'] != NULL)
    && preg_match('/data:([^;]*);base64,(.*)/', $_POST['file'], $matches)) {

    if($matches && (count($matches) > 2)) {
        $datatype = $matches[1];            
        $file = base64_decode($matches[2]);
    }
}

注意，当您将数据作为json对象发送到服务器时，$_FILES无法正常工作。

编辑：刚刚注意到您正在使用ng-file-upload？然后数据不会作为json对象发送，而是作为通常的形式urlencoded数据。在这种情况下，你不应该在你的PHP代码中有这一行：

$_POST = json_decode(file_get_contents('php://input'), true);

并以javascript发送数据：

Upload.upload({
    url: 'http://localhost/mobile-data/upload_file.php', 
    method: 'POST',
    file: file,
    sendFieldsAs: 'form',
    fields: {
        task_id: $scope.taskdetails.id,
        job_id: $rootScope.job_id
    }
 })

AngularJS：在文件上传时接收发布的数据

1 个答案: