Comment envoyer des données avec un fichier dans http POST (angularjs + expressjs) ?

Question

Situation

J'ai implémenté le téléchargement de fichiers. Le code frontal est tiré du populaire tutoriel . J'envoie POST en service :

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

Utilisation typique de multer dans le back-end :

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

};

Ça marche.

Question

Comment envoyer des données dans le même POST, disons une chaîne de caractères. "additional info" ?

Ce que j'ai essayé

J'ai essayé d'ajouter des données dans le service, c'est-à-dire :

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

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

Il semble être envoyé, mais je ne sais pas comment le recevoir en back-end. J'ai essayé de le trouver dans req (sans succès).

Answer 1

Pour envoyer des données (c'est-à-dire json) et un fichier en une seule requête POST, ajoutez les deux aux données du formulaire :

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

Du côté du serveur, il se trouve dans req.body.data pour qu'il puisse être reçu, c'est-à-dire comme ceci :

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

Answer 2

Vous pouvez récupérer le fichier à partir de req.files et l'enregistrer avec 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");
  });
});

Answer 3

Vous pouvez faire quelque chose comme ça :

          $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.
          });

Ou ajoutez simplement la propriété data à votre fonction.

    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'}
    })

Vous pouvez essayer quelque chose comme ceci sur le backend.

req.on('data', function (chunk) {
    console.log(chunk);
});