nodejs-expressjs上传图像并显示它们

nodejs expressjs upload images and display them

本文关键字：显示 图像 nodejs-expressjs      更新时间：2023-09-26

我有以下代码

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

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

使用此方法上传

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

那应该行得通。

相关文章：