Squeak.ru - шаблоны программирования

Как отправить данные вместе с файлом в http POST (angularjs + expressjs)?

Ситуация

Я реализовал загрузку файлов. Интерфейсный код взят из популярного учебника. Отправляю POST в сервис:

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        
        $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
        })
        
        .success(function(){
        })
       
        .error(function(){
         });
        }
    }]);

Типичное использование мультипликатора в бэкенде:

exports.postFile = function (req, res) {

    var storage = multer.diskStorage({ //multers disk storage settings
        destination: function (req, file, cb) {
            cb(null, '../documents/')
        },
        filename: function (req, file, cb) {
            cb(null, file.originalname)
        }
    });

    var upload = multer({ //multer settings
        storage: storage
    }).single('file');

    upload(req, res, function (err) {
        if (err) {
            res.json({error_code: 1, err_desc: err});
            return;
        }
        res.json({error_code: 0, err_desc: null});
    })

};

Это работает.

Вопрос

Как отправить некоторые данные в том же POST, скажем, строку "additional info"?

Что я пробовал

Я попытался добавить данные в службу, т.е.:

...
var fd = new FormData();
fd.append('file', file);
fd.append('model', 'additional info');

$http.post(uploadUrl, fd, {...})

Вроде отправил, а как получить в бекенде не знаю. Пытался найти его в req (безуспешно).

express angularjs multer
23.11.2016

Ответы:


1

Чтобы отправить данные (например, json) и файл в одном запросе POST, добавьте оба в данные формы:

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);

        var info = {
            "text":"additional info"
        };
        fd.append('data', angular.toJson(info));

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

        .success(function(){
        })

        .error(function(){
        });
    }
}]);

На стороне сервера он находится в req.body.data, поэтому его можно получить, например, так:

upload(req, res, function (err) {
    if (err) {
        res.json({error_code: 1, err_desc: err});
        return;
    }

    console.log(req.body.data);

    res.json({error_code: 0, err_desc: null});
})
14.01.2017
  • Спасибо за этот полезный ответ. решил мою проблему. 09.12.2017

    • 2

    Вы можете получить файл из req.files и сохранить его с помощью fs.writeFile.

    fs.readFile(req.files.formInput.path, function (err, data) {
  fs.writeFile(newPath, data, function (err) {
    if (err) {
    throw err;
    }
    console.log("File Uploaded");
  });
});
    23.11.2016
  • У меня нет проблем с отправкой и получением файлов. Оно работает. Я хочу отправить (и получить) дополнительные данные (вместе с файлом) в том же запросе POST. 24.11.2016
  • Вы можете использовать свойство данных в вашем $http.post, чтобы отправить объект со всеми дополнительными данными, которые вы хотите, отправив все входные данные. 24.11.2016
  • я изменил первый ответ, показывающий, как передавать данные со всех входов, предполагая, что у вас есть ng-model=user.email и т. д. во входном файле. 24.11.2016

    • 3

    Вы можете сделать что-то вроде этого:

              $http({
                url: url, 
                method: 'POST',
                data: json_data,
                headers: {'Content-Type': 'application/json'}
          }).then(function(response) {
                var res = response.data;
                console.log(res);
          }, function errorCallback(response) {
              // called asynchronously if an error occurs
             // or server returns response with an error status.
          });

    Или просто добавьте свойство данных в свою функцию.

        var userObject = {
    email: $scope.user.email,
    password: $scope.user.password,
    fullName: $scope.user.fullName
    };

    $http.post(uploadUrl, fd, {
         transformRequest: angular.identity,
         data: userObject,
         headers: {'Content-Type': 'application/json'}
    })

    Вы можете попробовать что-то подобное на бэкэнде.

    req.on('data', function (chunk) {
    console.log(chunk);
});
    23.11.2016
  • Где находится файл в этом POST? 23.11.2016
  • Вы сказали какие-то строковые данные. 23.11.2016
  • Я имею в виду строку вместе с файлом, как говорится в заголовке. 23.11.2016
  • Что касается последнего редактирования: почему я должен искать его в ответе сервера? 23.11.2016
  • Извиняюсь. Требуется Я изменю это. Взгляните на второй ответ. Надеюсь, это поможет! 24.11.2016
    • Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...