如何在快递应用中渲染使用multer存储的图像？

Question

我已经在快递应用服务器上存储了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，但它没有显示图像。

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

Answer 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