如何使用 Nodejs 和 Multer 发布图像？答案

【问题标题】：How do I post an image with Nodejs and Multer?如何使用 Nodejs 和 Multer 发布图像？
【发布时间】：2017-09-07 00:20:00
【问题描述】：

我正在尝试构建一个包含上传文件（例如图像）并发布它的应用程序。

这是我到目前为止所做的：

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

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

var upload = multer({storage: storage});

所以上面的代码会将我上传的文件保存在一个名为“img”的文件夹中

module.exports = function(app){

    app.get('/', function(req, res){
        res.render('index');
    });

    app.post('/upload', upload.single('file'), function(req, res){

    res.send(req.file);
    });
}

现在在最后一个帖子请求中，我在“req.file”中获得了有关该文件的所有元数据信息。例如，如果有人提出此请求，我想获取文件并将其发布：

app.get('/postedfiles', function(req, res){});

我应该将它们保存在数据库中吗？

【问题讨论】：

标签： node.js express multer

【解决方案1】：

并非如此，它保存在您的计算机中，在您选择的目录中。

这是用于 multer 上传的纯 html 表单。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post">
      <input type="file" name="avatar" value="">
      <input type="submit" name="" value="ssss">
    </form>
  </body>
</html>

这是我们的后端代码。在存储中，我选择将文件上传到/upload 目录下的位置，并为它们提供当前时间的文件名。我们声明了upload 变量进行设置，然后我们使用upload.single('avatar')，当我们收到一个发布请求时，我们在回调之前声明它。 avatar 这里是 input 标签内的 html 表单中的文件名。在回调中，我们可以使用req.file 访问我们的文件。模块以这种方式保存文件，非常好用。

var express = require('express')
var multer  = require('multer')
var app = express()

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname + '/uploads')      //you tell where to upload the files,
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.png')
  }
})

var upload = multer({storage: storage,
    onFileUploadStart: function (file) {
      console.log(file.originalname + ' is starting ...')
    },
});

app.set('view engine', 'ejs');

app.get('/', function(req, res, next){    
    res.render('mult');  //our html document
})

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  console.log(req.file);
  return false;
})

请确保您提供 png 或 jpeg 或任何您想使用的图像和扩展名，否则它将不会被视为计算机中的图像。

更新您的问题

如果您想在不刷新页面的情况下向客户端显示图像，只需在客户端浏览器上使用带有 get 请求的 AJAX。您可以将文件上传到您的网络服务器 或网络服务器 并从那里检索图像。比如我在stackoverflow中的头像保存为 here

您可以在 get 请求中使用参数来接收来自服务器的所有文件。

例如，假设客户端向/uploads/imageOfApet.png 发出获取请求。

app.get('/uploads/:theImageName', function(req, res){
   console.log(req.params.theImageName); //returns the imageOfApet.png
   var theName = req.params.theImageName; //imageOfApet.png
   res.sendFile(__dirname + "/uploads/" + theName); //Sending the user the file
})

【讨论】：

我明白这一点。顺便谢谢你的回答。但我想要的是能够在网页上向用户展示我刚刚上传的图像。我不知道该怎么做。
例如在这段代码中，文件被保存到uploads目录，我可以把图片链接到我的网站里面，比如www.mywebsite.com/uploads/imageNumberOne.png
非常感谢。如果您能给我一些代码示例，我将不胜感激，这样我就可以理解它是如何完成的。对不起，我还是这个问题的初学者。
你知道如何在nodejs中使用参数@JeffGoes 也谢谢你！
希望我有足够的帮助，请查看更新@JeffGoes