AngularJS: Прием размещены данные при загрузке файла

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]); 
    } 
} 

Обратите внимание, $_FILES не будет работать, когда вы отправляете свои данные как объект JSON на сервер.

---

EDIT: вы только что заметили, что используете 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 
    } 
})