nodejs expressjs上传图像并显示它们 [英] nodejs expressjs upload images and display them

问题描述

我有以下代码

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修改路径

I used thumbnail_img in a desperate intent to modify the path

现在在products.js

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

Problem is when I use the template for show the products the src attribute shows like this src="./static/files/name-fo-the-pics" so how I do for display the images I uploaded

推荐答案

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

What you can do in this case is that you got the target path of the stored file and get it save into database.

使用此方法上传

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;

        });
    });
});

在此方法中显示该路径

pre> fs.readFile（target_path，binary，function（error，file）{
if（error）{
res.writeHead（500，{Content -type：text / plain}）;
res.write（error +\\\
）;
res.end（）;
} else {

res.writeHead（200，{Content-Type：image / png}）;
res.write（file，binary）;

}


然后应该工作。

这篇关于nodejs expressjs上传图像并显示它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！