如何使用Nodejs和Multer发布图像?

时间:2017-09-06 15:31:23

标签: node.js express multer

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

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

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

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

1 个答案:

答案 0 :(得分:2)

实际上,它会保存在您的计算机内部,在您选择的目录中。

这是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这里的内容是输入标记内的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即可。您可以将文件上传到 Web服务器 Web服务器,然后从中检索图像。例如,我在stackoverflow中的个人资料图片已保存 here

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

例如,假设客户向/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
})