Télécharger le fichier en utilisant le multer dans l'application MEAN

Question

J'ai besoin de votre aide, ceci est très important car cela stoppe la progression de mon application. J'ai tout essayé mais je suis confus. J'essaie de télécharger le fichier en utilisant multer, si j'utilise POSTMAN pour mon code, j'obtiens la réponse 'File uploaded' c'est que tout semble être ok, mais rien ne se passe, c'est-à-dire req.file is undefined et je ne sais pas comment le changer. S'il vous plaît regarder sur mon code

serveur

var express = require('express'); 
var app = express(); 
var port = process.env.PORT || 8080; 
var morgan = require('morgan'); 
var path = require('path'); 
var multer = require('multer'); 
var mongoose = require('mongoose'); 
var bodyParser = require('body-parser'); 
var router = express.Router(); 
var appRoutes = require('./app/routes/api')(router,multer,path); 
var passport = require('passport'); 
var social = require('./app/passport/passport')(app,passport); 
var product = require('./app/seed/product-seeder'); 

app.use(morgan('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(express.static(__dirname + '/public')); 
app.use('/api', appRoutes); 

mongoose.connect('mongodb://localhost:27017/tutorial', function(err){ 
if(err){ 
    console.log('MongoDB not connected' + err) 
} else { 
    console.log('Scuccessfully connected to MongoDB database'); 
} 
}) 
app.get('*', function(req, res){ 
res.sendFile(path.join(__dirname + '/public/app/views/index.html')) 
}) 

app.listen(port, function(){ 
console.log('Running the server on port ' + port) 
}); 

api

module.exports = function(router,multer,path) { 
var storage = multer.diskStorage({ 
destination: function(req, file, callback) { 
    callback(null, './uploads') 
}, 
filename: function(req, file, callback){ 
    callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) 
} 
}) 
router.post('/courses/files', function(req, res) { 
    var upload = multer({ storage: storage }).single('file') 
    upload(req, res, function(err) { 
     res.end('File is uploaded') 
     console.log(req.file) 
    }) 
    }) 

    return router 
} 

services

userFactory.storeFile = function(file){ 
    return $http.post('/api/courses/files', file) 
} 

html

<div class="container management-user"> 
    <form enctype="multipart/form-data" name="sendFile" ng-submit="product.sendFile(file)" novalidate> 
    <input type="file" name="file" id="imgInp"> 
    <input type="submit" value="submit"> 
    </form> 
</div> 

contrôleur

app.sendFile = function(file, valid) {   
    User.storeFile(app.file).then(function(data){ 
     console.log(data) 
    }); 
} 

Answer 1

Essayez d'utiliser une directive comme ci-dessous

.directive('fileModel', ['$parse', function($parse) { 
     function fn_link(scope, element, attrs) { 
      var onChange = $parse(attrs.fileModel); 
      element.on('change', function (event) { 
       onChange(scope, { $files: event.target.files }); 
      }); 
     }; 
     return { 
      link: fn_link 
     } 
    }]) 

puis remplacer input type = fichier à

<input type="file" id="fileId" accept="image/*" file-model="myFiles($files)"/> 

puis dans votre contrôleur ajouter cette

var formData = new FormData(); 
     $scope.myFiles = function($files) { 
      formData.append('img', $files[0]); 
} 

Remplacer « img » à un nom que vous voulez comme dans backend si vous voulez ajouter quelque chose, ajoutez chaque et toutes les valeurs avec les touches à formData pour envoyer comme

formData.append('title', form.title); 

et votre $ http méthode

$http.post('/api/courses/files', formData).then(...) 

Noeud côté puis utilisez multer DiskStorage pour télécharger le fichier vers le serveur

var uploadMulter = multer.diskStorage({ 
    destination: function(req, file, callback) { 
     callback(null, "./UploadDir"); 
    }, 
    filename: function(req, file, callback) { 
     callback(null, Date.now() + path.extname(file.originalname)); 
    } 
}); 

var upload = multer({ storage: uploadMulter }); 

./UploadDir est le dossier de destination où vous souhaitez télécharger votre fichier

et enfin votre routeur

router.post('/courses/files', upload.single('img'), function(req,res){ 
console.log(req.file);}); 

maintenant si vous souhaitez télécharger une seule utilisation de fichiers upload.single ('img') ** ou pour un usage multiple ** upload.array ('img', 3) ici 3 fichiers seront téléchargés. change comme tu veux.

si votre dossier de destination UploadDir n'est pas essayer de se joindre accessible par

app.use('/UploadDir', express.static(path.join(__dirname, 'UploadDir')))