nodejs expressjs上传图片并显示它们

时间:2012-09-13 10:24:53

标签: javascript jquery node.js express

我有以下代码

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');

好的,我有这条路线

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"所以我如何显示我上传的图像

1 个答案:

答案 0 :(得分:6)

在这种情况下,您可以做的是获得存储文件的目标路径并将其保存到数据库中。

使用此方法上传

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");

    }

它应该工作。