在Node.js和Express中使用Multer上传文件

最新推荐文章于 2024-05-24 18:06:27 发布

cunjie3951

最新推荐文章于 2024-05-24 18:06:27 发布

阅读量330

点赞数

文章标签：数据库 java python vue nodejs ViewUI

当Web客户端将文件上传到服务器时，通常是通过表单提交并编码为multipart/form-data 。 Multer是Express和Node.js的中间件，当用户上传文件时，它可以轻松处理此multipart/form-data 。

在本教程中，我将向您展示如何使用Multer库在Node中处理不同的文件上传情况。

Multer如何工作？

就像我上面说的，Multer是Express中间件。中间件是连接不同应用程序或软件组件的软件。在Express中，中间件处理传入的请求并将其转换为服务器。在我们的案例中，穆特在上传文件时充当了助手。

项目设置

我们将在该项目中使用Node Express框架。当然，您需要安装Node。

为我们的项目创建一个目录，导航到该目录，然后发出npm init来创建一个.json文件，该文件管理我们应用程序的所有依赖关系。

mkdir upload-express
cd  upload-express
npm init

接下来，安装Multer，Express以及引导Express应用程序所需的其他依赖项。

npm install express multer body-parser --save

接下来，创建一个server.js文件。

touch server.js

然后，在server.js中 ，我们将初始化所有模块，创建Express应用程序，并创建用于连接浏览器的服务器。

// call all the required packages
const express = require('express')
const bodyParser= require('body-parser')
const multer = require('multer');
app.use(bodyParser.urlencoded({extended: true}))

const app = express()

//CREATE EXPRESS APP
const app = express();

//ROUTES WILL GO HERE
app.get('/', function(req, res) {
    res.json({ message: 'WELCOME' });   
});

app.listen(3000, () => console.log('Server started on port 3000'));

运行node server.js并在浏览器上导航到localhost:3000应该会给您以下消息。

创建客户端代码

下一步将创建一个index.html文件，以编写将提供给客户端的所有代码。

touch index.html

该文件将包含用于上载不同文件类型的不同表格。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MY APP</title>
</head>
<body>
  

 <!--  SINGLE FILE -->
<form action="/uploadfile" enctype="multipart/form-data" method="POST"> 
   <input type="file" name="myFile" />
   <input type="submit" value="Upload a file"/>
</form>


<!-- MULTIPLE FILES -->

<form action="/uploadmultiple"  enctype="multipart/form-data" method="POST">
  Select images: <input type="file" name="myFiles" multiple>
  <input type="submit" value="Upload your files"/>
</form>

  <!--   PHOTO-->

<form action="/upload/photo" enctype="multipart/form-data" method="POST"> 
  <input type="file" name="myImage" accept="image/*" />
  <input type="submit" value="Upload Photo"/>
</form>



</body>
</html>

打开server.js并编写用于呈现index.html文件而不是“ WELCOME”消息的GET路由。

// ROUTES
app.get('/',function(req,res){
  res.sendFile(__dirname + '/index.html');

});

磨盘存储

下一步将是为文件定义存储位置。 Multer提供了将文件存储到磁盘的选项，如下所示。在这里，我们设置了一个目录，所有文件都将保存在该目录中，并且还将为文件提供新的标识符。

//server.js


// SET STORAGE
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

处理文件上传

上载单个文件

在index.html文件中，我们定义了一个执行POST请求的action属性。现在，我们需要在Express应用程序中创建一个端点。打开server.js文件并添加以下代码：

app.post('/uploadfile', upload.single('myFile'), (req, res, next) => {
  const file = req.file
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return next(error)
  }
    res.send(file)
 
})

请注意，文件字段的名称应与传递给upload.single函数的myFile参数相同。

上载多个文件

使用Multer上传多个文件类似于上传单个文件，但有一些更改。

//Uploading multiple files
app.post('/uploadmultiple', upload.array('myFiles', 12), (req, res, next) => {
  const files = req.files
  if (!files) {
    const error = new Error('Please choose files')
    error.httpStatusCode = 400
    return next(error)
  }

    res.send(files)
 
})

上传图片

我们不会将上传的图像保存到文件系统中，而是将它们存储在MongoDB数据库中，以便以后可以根据需要检索它们。但是首先，让我们安装MongoDB。

npm install mongodb --save

然后，我们将通过Mongo.client方法连接到MongoDB，然后将MongoDB URL添加到该方法。您可以使用提供免费计划的Mlab等云服务，也可以只使用本地可用的连接。

const MongoClient = require('mongodb').MongoClient
const myurl = 'mongodb://localhost:27017';

MongoClient.connect(myurl, (err, client) => {
  if (err) return console.log(err)
  db = client.db('test') 
  app.listen(3000, () => {
    console.log('listening on 3000')
  })
})

打开server.js并定义一个POST请求，以将图像保存到数据库。

app.post('/uploadphoto', upload.single('picture'), (req, res) => {
    var img = fs.readFileSync(req.file.path);
 var encode_image = img.toString('base64');
 // Define a JSONobject for the image attributes for saving to database
 
 var finalImg = {
      contentType: req.file.mimetype,
      image:  new Buffer(encode_image, 'base64')
   };
db.collection('quotes').insertOne(finalImg, (err, result) => {
  	console.log(result)

    if (err) return console.log(err)

    console.log('saved to database')
    res.redirect('/')
  
    
  })
})

在上面的代码中，我们首先将图像编码为base64字符串，从base64编码的字符串构造新的缓冲区，然后将其以JSON格式保存到我们的数据库集合中。

然后，我们显示一条成功消息，并将用户重定向到索引页面。

检索存储的图像

要检索存储的图像，我们使用find方法执行MongoDB搜索并返回结果数组。然后，我们继续获取所有图像的_id属性，并将其返回给用户。

app.get('/photos', (req, res) => {
db.collection('mycollection').find().toArray((err, result) => {

      const imgArray= result.map(element => element._id);
			console.log(imgArray);

   if (err) return console.log(err)
   res.send(imgArray)

  })
});

由于我们已经知道图像的ID，因此可以通过在浏览器中传递其ID来查看图像，如下所示。

app.get('/photo/:id', (req, res) => {
var filename = req.params.id;

db.collection('mycollection').findOne({'_id': ObjectId(filename) }, (err, result) => {

    if (err) return console.log(err)

   res.contentType('image/jpeg');
   res.send(result.image.buffer)
  
   
  })
})

结论

希望本教程对您有所帮助。文件上传可能是一个令人生畏的话题，但是并不一定要实现。使用Express和Multer，可以轻松而直接地处理multipart/form-data 。

您可以在我们的GitHub存储库中找到文件上传示例的完整源代码。

翻译自: https://code.tutsplus.com/tutorials/file-upload-with-multer-in-node--cms-32088

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在Node.js和Express中使用Multer上传文件

当Web客户端将文件上传到服务器时，通常是通过表单提交并编码为multipart/form-data 。 Multer是Express和Node.js的中间件，当用户上传文件时，它可以轻松处理此multipart/form-data 。在本教程中，我将向您展示如何使用Multer库在Node中处理不同的文件上传情况。 Multer如何工作？就像我上面说的，Multer是Expre...
复制链接

扫一扫