如何渲染在 express 应用中使用 multer 存储的图像？答案

【问题标题】：How to render images which are stored using multer in express app?如何渲染在 express 应用中使用 multer 存储的图像？
【发布时间】：2019-04-10 01:34:28
【问题描述】：

我已在 express 应用服务器上使用 multer 存储图像。但我没有让这些图像在我的 html 文件中使用。

上传文件的代码。

var multer = require("multer")

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname+'/public/uploads')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+file.originalname)
  }
})
app.post('/add/details', upload.any(), function(req,res){
  var data = req.body;
  data.propic = req.files[0].path;
  res.render('index',{
    "data": data
  });
})

在索引文件中，我将 img 的 src 设置为 data.propic，但它没有显示图像。

【问题讨论】：

您使用的是哪个render 引擎？
我用的是jade引擎。

标签： node.js express multer

【解决方案1】：

你可以用这个

var fileUpload = require('express-fileupload');
router.use(fileUpload());

sampleFile = req.files.team_image;
file_name = sampleFile.name;
sampleFile.mv('public/storage/'+file_name, function(err) {
                if (err) {
                    if (err) throw err;
                }
});

【讨论】：

【解决方案2】：

由于您将图像保存在public/images 文件夹中，您可以利用express.static 自动提供这些新上传的文件。

var express = require('express');
var multer = require("multer")

var app = express();

//all static contents inside the given folder will be accessible
//e.g. http://example.com/public/uploads/test.png
app.use(express.static(__dirname+'/public/uploads'));

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname+'/public/uploads')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+file.originalname)
  }
});

app.post('/add/details', upload.any(), function(req,res){
   var data = req.body;
   // path of uploaded file.
   data.propic = '/public/uploads/'+req.files[0].filename;
   res.render('index',{
      "data": data
   });
});

假设您使用jade 作为视图引擎，您可以将img 嵌入如下：

img(src=data.propic) // it's equivalent to http://example.com/public/uploads/test.png

【讨论】：

这行得通，但需要一些 twiks。在 index.jade 文件中我必须写 img(src='/'+data.propic)。并且要在数据对象中设置 propic，只有 req.files[0].filename 可以做到这一点。喜欢data.propic = req.files[0].filename;
是的，我确实接受了，但它说声誉必须是 15 我是 stackoverflow 的新手。对不起。