javascript - nodejs expressjs 上传图片并显示

Question

我有以下代码

应用程序.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" 所以我如何显示我上传的图片

Answer 1

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

使用此方法上传

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;

        });
    });
});

在该方法中检索时显示该路径

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

    }

它应该可以工作了。