AngularJS: получение опубликованных данных во время загрузки файла

0

Мой текущий сценарий: я повторяю повторение вложенности, как показано ниже:

$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. Помогите мне правильно получить значения.

  • 3
    Вы также должны пометить этот вопрос PHP. Я не разрабатывал PHP много лет, но я бы порекомендовал var_dumping $ POST, $ GET и $ FILES.
  • 0
    Тег обновлен ....

1 ответ

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
    }
 })
  • 0
    Большое спасибо за ответ. файл получает правильно. Но проблема в данных, которые отправляются .. пусть журнал консоли выглядит так: ----------------------------259371869026485 Content-Disposition: form-data; name="task_id" 21 -----------------------------259371869026485- Content-Disposition: form-data; name="job_id" 12 но я не могу получить job_id и task_id на стороне сервера.
  • 0
    Вы заслужили мое уважение, сэр ... Да, вы определили правильно. Я не должен декодировать это .. Теперь это работает очень хорошо.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню