2012-09-13 48 views
3

我有以下代碼的NodeJS expressjs上傳圖片並顯示出來

app.js

var express = require('express'), 
    fs = require('fs'), 
    format = require('util').format; 

var app = express(); 

app.configure(function() { 
    app.use(express.bodyParser()); 
    app.use(express.bodyParser({uploadDir:'./static/files/'})) 
    app.use(express.methodOverride()); 
    app.use(express.static(__dirname + '/static')); 
    app.use(express.errorHandler({ 
    dumpException: true, 
    showStack: true 
    })); 
}); 
app.set('views',__dirname + '/views'); 
app.set('view engine', 'jade'); 

OK,然後我有這條路線

app.post('/addPhoto', products.addPhoto); 

這種形式

form(action='/new', method='POST', enctype="multipart/form-data") 
input(type='text', name="name", placeholder='nanme') 
input(type='text', name="description",placeholder='description') 
input(type='text', name="thumbnail_img",placeholder='path') 
input(type='number', name='price', placeholder='123') 
input(type="file", name="thumbnail")  
input(type='submit') 

我用thumbnail_img我娜不顧一切想要修改的路徑

現在products.js

var products = exports.products = []; 

var format = require('util').format; 
var fs = require('fs'); 

products.push(
    { id:0, 
    name:'name 1', 
    description:'description1', 
    thumbnail_img: '', 
    price: 100 }, 
    { id:1, 
    name: 'name_2', 
    description: 'description2', 
    thumbnail_img: '', 
    price: 150 
    } 
); 

exports.addPhoto = function(req,res){ 
    var body = req.body; 
    var tmp_path = req.files.thumbnail.path; 
    var target_path = './static/files/' + req.files.thumbnail.name; 

    fs.rename(tmp_path, target_path, function(err) { 
    if (err) throw err; 
    fs.unlink(tmp_path, function() { 
    body.thumbnail_img = target_path; 
     if (err) throw err; 
    }); 
    }); 

    var body = req.body; 

// Fun here is I got a path starting with a . 
// so this code is for remove the .  

    var n = target_path.toString() 
    var n2 = n.replace('.',''); 
    body.thumbnail_img = n2; 


    products.push(req.body); 
    res.redirect('/products'); 
}; 

問題是,當我使用的模板,展示src屬性這樣表示src="./static/files/name-fo-the-pics"產品使我該怎麼辦了顯示圖像我上傳

回答

5

在這種情況下你可以做的是你獲得了存儲文件的目標路徑並將其保存到數據庫中。

使用此方法上傳

app.post('/upload', function(req, res) { 

    // get the temporary location of the file 
    var tmp_path = req.files.thumbnail.path; 
    // set where the file should actually exists - in this case it is in the "images" directory 
    target_path = '/tmp/' + req.files.thumbnail.name; 
    // move the file from the temporary location to the intended location 
    fs.rename(tmp_path, target_path, function(err) { 
     if (err) throw err; 
     // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files 
     fs.unlink(tmp_path, function() { 
      if (err) throw err; 

     }); 
    }); 
}); 

雖然retriving表明路徑這種方法

fs.readFile(target_path, "binary", function(error, file) { 
    if(error) { 
     res.writeHead(500, {"Content-Type": "text/plain"}); 
     res.write(error + "\n"); 
     res.end(); 
    } else { 

     res.writeHead(200, {"Content-Type": "image/png"}); 
     res.write(file, "binary"); 

    } 

它應該工作即可。