2016-10-02 32 views
1

我有一個基於Node/Express/Angular構建的應用程序。使用Express和Mulder無法訪問上載文件夾中的圖像

我將所有的角度前端代碼放在「客戶端」文件夾中,並且我的所有後端(nodejs & express)都放在另一個文件夾(「服務器」)中。

我使用Grunt將代碼編譯到「server/dist」文件夾中,所以當我發佈到生產環境時,我只是上傳了「server」文件夾。

我已經添加了一個功能來上傳圖片,我正在使用multer來做到這一點。

我在「服務器」目錄中創建了一個「fileuploads」文件夾,併成功將文件上傳到該文件夾​​。

問題:

在我的應用我需要引用的圖片,但即使我已經在我的服務器/ app.js文件中創建一個靜態的參考,我仍然無法達到這些目標。

這裏是我的服務器端app.js文件看起來像:

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; 

在客戶端,我試過訪問下列方式中的文件:

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

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

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

但沒有似乎工作。

我錯過了什麼?

回答

2

這將是不錯的

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

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

或把它縮短了這種方式:

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

這樣一來,你就可以在任何地方訪問它在你的應用程序爲: <img src="/fileuploads/0d904f4a422ea5a8fcd9a3859b58cdb9" />這基本上是說「我呼籲fileupl任何地方噢,爲我服務正確的道路「。^_^

相關問題