Impossible d'accéder aux images dans le dossier de téléchargement en utilisant Express et Multer

Question

J'ai une application basée sur Node/Express/Angular.

J'ai tout mon code angulaire frontal dans un dossier "client" et j'ai tout mon backend (nodejs & express) dans un autre dossier ("serveur").

J'utilise Grunt pour compiler le code dans le dossier "server/dist", donc quand je publie en production, je télécharge simplement le dossier "server".

J'ai ajouté une fonctionnalité pour télécharger des images et j'utilise multer pour cela.

J'ai créé un dossier "fileuploads" dans le répertoire "server" et je télécharge avec succès les fichiers dans ce dossier.

Le problème:

Dans mon application je dois référencer les images, mais même si je l'ai créé une référence statique dans mon serveur/fichier app.js, je suis toujours incapable de les atteindre.

Voici ce que mon côté serveur fichier app.js ressemble:

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var mongoose = require('mongoose'); 
var cors = require('cors'); 
var multer = require('multer'); 

mongoose.connect('mongodb://localhost/OM'); 

var app = express(); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(cookieParser()); 
app.use(cors());  

app.use('/api', require('./routes/api')); 
app.use('/sendmail', require('./routes/sendmail')); 
app.use('/uploads', require('./routes/uploads')); 
app.use(express.static(path.join(__dirname, '../client/app/custom'))); 
app.use(express.static(path.join(__dirname, '/dist'))); 
app.use(express.static(path.join(__dirname, '/fileuploads'))); 



// production error handler 
// no stacktraces leaked to user 
app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
     message: err.message, 
     error: {} 
    }); 
}); 

app.all('/*', function(req, res){ 
    res.sendFile(path.join(__dirname, '/dist/index.html')); 
}); 

module.exports = app; 

Du côté client, j'ai essayé d'accéder aux fichiers de la manière suivante:

<img src="fileuploads/0d904f4a422ea5a8fcd9a3859b58cdb9" /> 

<img src="/fileuploads/0d904f4a422ea5a8fcd9a3859b58cdb9" /> 

<img src="../fileuploads/0d904f4a422ea5a8fcd9a3859b58cdb9" /> 

Mais rien semble fonctionner.

Qu'est-ce qui me manque?

Answer 1

Il sera agréable d'avoir

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

comme

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

ou le rendre plus court de cette façon:

app.use('/fileuploads', express.static(process.cwd() + '/fileuploads')); 

De cette façon, vous pourrez y accéder partout dans votre application en tant que: <img src="/fileuploads/0d904f4a422ea5a8fcd9a3859b58cdb9" /> qui est fondamentalement dire "partout où j'appelle fileupl oads, sers moi le bon chemin ".^_^