Загрузите несколько файлов через AngularJS в Laravel Controller

У меня есть

введите описание изображения здесь

Кнопка просмотра файлов

<input type="file" upload-files multiple />

Кнопка создания

<button class="btn btn-link" ng-click="store()" >Create</button>

Директива

myApp.directive('uploadFiles', function () {
    return {
        scope: true,
        link: function (scope, element, attrs) {
            element.bind('change', function (event) {
                var files = event.target.files;
                for (var i = 0; i < files.length; i++) {
                    scope.$emit("seletedFile", { file: files[i] });
                }
            });
        }
    };
});

Прослушать выбранный файл

$scope.files = [];
$scope.$on("seletedFile", function (event, args) {

    console.log("event is ", event);
    console.log("args is ", args);

    $scope.$apply(function () {
        $scope.files.push(args.file);
    });

});

Опубликовать данные и выбранные файлы.

$scope.store = function() {

    $scope.model = {
      name: $scope.name,
      type: $scope.type
    };

    $http({
        method: 'POST',
        url: '/image/store',
        headers: { 'Content-Type': undefined },
        transformRequest: function (data) {
            console.log("data coming into the transform is ", data);
            var formData = new FormData();
            formData.append("model", angular.toJson(data.model));
            for (var i = 0; i < data.files; i++) {
                formData.append("file" + i, data.files[i]);
            }
            return formData;
        },

        data: { model: $scope.model, files: $scope.files }

    })


    .then(function successCallback(response) {
        console.log("%cSuccess!", "color: green;");
        console.log(response);
        $scope.refresh();
        $scope.showModal = false;
        }, function errorCallback(response) {
        console.log("%cError", "color: red;");
        console.log(response);
    });
};

Результат

В моей консоли я не вижу, чтобы мои файлы попадали на мой контроллер в фоновом режиме.

array:1 [
  "model" => "{"type":"wedding"}"
]

Вопросы

Какие шаги я забыл?

Как бы это сделать и отладить это дальше?

Ответы

Ответ 1

Я сделал несколько проектов angular 1, а также обнаружил, что загрузить файлы через $http api не так просто. Надежды ниже фрагмента кода, который я использовал в своих проектах, могут вам помочь.

$scope.store = function() {
  var formData = new FormData();

  // add normal properties, the name should be the same as
  // what you would use in a html form
  formData.append('model[name]', $scope.name);
  formData.append('model[type]', $scope.type);

  // add files to form data.
  for (var i = 0; i < $scope.files; i++) {
    formData.append('file' + i, $scope.files[i]);
  }

  // Don't forget the config object below
  $http.post('/image/store', formData, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  }).then(function() {
    // ...
  });
};

Ответ 2

Вот несколько предложений для вас:

  • Установите Content-type в multipart/form-data, чтобы установить тип содержимого как-то вроде... "он имеет определенную роль в нем, убедитесь, что вы правильно его поняли.
  • Использовать Axios. Здесь рабочие примеры (если вы не использовали Axios, этот пример тоже хорош). Пример для Axios при загрузке файла.

Ответ 3

Вместо этого вы можете использовать FormData​​p > 

var formData = new FormData();

  formData.append('model[var]', $scope.var);

  // For add to the FormData other file
  for (var i = 0; i < $scope.files; i++) {
    formData.append('file' + i, $scope.files[i]);
  }

 // POST REQUEST MUST BE:
  $http.post('url', formData, {
    transformRequest: angular.identity,  //It is for allowing files
    headers: {'Content-Type': undefined}
    }).then(function(response) 
  {
    // verify if response get 200
  });

Ответ 4

Я не очень разбираюсь в Angular, поэтому я предполагаю, что ваш front-end работает.

Отладочный совет Создайте файл PHP, который называется... Я не знаю... file_dump.php. В этом файле введите этот код:

<?php
    echo "<pre>"
    print_r($_REQUEST)
    echo "</pre>"
?>

и отправьте свою форму. Это покажет вам все ваши данные запроса. Если вы не видите свои файлы на выходе, это проблема с вашим JavaScript. Поскольку я не так хорош в Angular, я собираюсь указать вам на эту ссылку: ссылка на несколько учебников по загрузке файлов с помощью Angular. Эти ребята, похоже, знают, что они делают.

Если вы видите свои файлы в файле file_dump.php, это проблема с вашим бэкэнд - Laravel. Это, я могу вам помочь, но мне нужно, чтобы ваши сценарии для меня были полезными в этом аспекте.

Пожалуйста, опубликуйте результаты file_dump.php.

Также вы используете правильные методы для извлечения файлов? Ссылка. Если нет, то мы нашли нашего виновника...

= D
Pranav

Ответ 5

Это моя директива:

app.directive('fileModel', ['$parse', 'message', function ($parse, message) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            //This part is for validate file type in current case must be image
            element.bind('change', function (e) {
                if (attrs.onlyImages == 'true') {
                    if (element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.jpg'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.jpeg'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.png'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.gif'
                        && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.bmp'
                    ) {
                        message.error("This field only accept files of type images(jpg,png)");
                        element.attr('is_valid', false);
                        return false;
                    } else {
                        element.attr('is_valid', true);
                    }
                }
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

html:

<input type="file" only-images="true" file-model="data.image" >

И фрагмент Js Controller:

 var fd = new FormData();
 fd.append('fileImage', data.image);

 $http.post('http://url.com', fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined,}
            })

На laravel, чтобы получить и скопировать изображение: ясно в документах

https://laravel.com/docs/5.4/requests#files