Express 4: Comment envoyer un objet JSON à afficher?

Question

J'ai fait des recherches au cours des derniers jours et je n'arrive pas à comprendre cela.

Objectif: L'utilisateur télécharge un fichier texte à l'aide du formulaire de téléchargement de fichier angulaire et enregistre le fichier dans un dossier temporaire. Les données puis POSTs et l'utilisateur peut voir les métadonnées et le contenu du fichier soit sur la même page, ou une page redirigée.

Problème: Dans ma route POST, je peux console.log (req.file) et il affiche le fichier les métadonnées. Le fichier enregistre dans le dossier temporaire. J'ai essayé de res.send (req.file), res.json (req.file), les données liant les métadonnées dans la portée du contrôleur, res.locals, les fonctions de middleware, et bien d'autres choses que je peux Je ne me souviens même pas. L'objet json ne vient jamais à la vue.

Voici un extrait de ce que je suis en train de travailler.

routes.js

var express = require('express'); 
var app = express(); 
var router = express.Router(); 

router.get('/test', function(req, res, next){ 
    res.render('test', {title: 'Test'}); 
}); 

router.post('/test', function(req, res, next){ 
    console.log(req.file); 
    res.json(req.file); 
}); 

module.exports = router; 

app.js

var express = require('express'); 
var path = require('path'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var logger = require('morgan'); 
var sys = require('sys'); 
var multer = require('multer'); 
var app = express(); 
// Local Files 
var routes = require('./routes/index'); 
var users = require('./routes/users'); 
var favicon = require('serve-favicon'); 
// console.log(__dirname + '/public/scripts/test.py'); 

// Create multer object for file uploads 
var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, './tmp/') 
    } 
    // filename: function (req, file, cb) { 
    // cb(null, file.originalname + "%" + Date.now()) 
    // } 
}); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 
app.use(favicon(__dirname + '/public/favicon.ico')); 
app.use(logger('dev')); 
app.use(cookieParser()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
// app.use(express.bodyParser({ keepExtensions: true, uploadDir: __dirname + '/photos' })); 
app.use(express.static(path.join(__dirname, 'public'))); 
app.use(express.static(path.join(__dirname, 'bower_components'))); 
app.use(multer({ storage: storage }).single('file')); 
app.use('/', routes); 
app.use('/users', users); 

controller.js

var t = angular.module('upload', ['ngFileUpload']); 

t.controller('ctrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
    $scope.f = ''; 
    $scope.uploadFiles = function(file) { 
     $scope.f = file; 
     console.log(file); 
     if (file && !file.$error) { 
      file.upload = Upload.upload({ 
       url: '/test', 
       file: file 
      }); 
      file.upload.then(function (response) { 
       $timeout(function() { 
        file.result = response.data; 
       }); 
      }, function (response) { 
       if (response.status > 0) 
        $scope.errorMsg = response.status + ': ' + response.data; 
      }); 
      file.upload.progress(function (evt) { 
       file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
      }); 
     } 
    } 
}]); 

req.file

{ fieldname: 'file', 
    originalname: 'lorem.rtf', 
    encoding: '7bit', 
    mimetype: 'text/rtf', 
    destination: './tmp/', 
    filename: '0b9d25cc663a05628059bd56a0aef4bc', 
    path: 'tmp/0b9d25cc663a05628059bd56a0aef4bc', 
    size: 815 } 

Answer 1

Vous pouvez toujours essayer JSON.stringify à sérialiser. Voir si cela rend req.file correctement. Vous pouvez toujours définir l'en-tête sur text/json manuellement.

Answer 2

Je ne sais pas exactement pourquoi cela fonctionne par rapport à ce que je faisais. (J'ai l'impression d'avoir essayé de nombreuses variantes de la même chose) Je suis resté proche des docs de téléchargement de fichiers angulaires et je suis capable de définir l'objet de réponse à une variable de portée.

La seule différence notable est que je n'ai pas défini la fonction Upload sur une variable et que j'appelle des actions sur la variable. Au lieu de cela, tous les événements sont liés comme un seul.

routes.js et app.js sont restés les mêmes.

fonctionnent nouvelles controller.js

$scope.upload = function (file) { 
    Upload.upload({ 
     url: '/test', 
     data: {file: file} 
    }).then(function (resp) { 
     console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data); 
     console.log(resp.data); 
     $scope.obj = resp.data; 
    }, function (resp) { 
     console.log('Error status: ' + resp.status); 
    }, function (evt) { 
     var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
     console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
    }); 
};