node.js使用express-fileupload中间件实现文件上传

使用 Express 和 Express-fileupload 中间件可以轻松实现基于 Node.js 的文件上传功能。下面是一个详细的攻略。

使用Express-fileupload中间件实现文件上传

步骤一：安装Express和Express-fileupload

在开始使用Express-fileupload中间件之前，需要安装 Express 框架和 Express-fileupload 中间件。使用 npm 命令行工具在项目目录下执行以下命令：

npm install express express-fileupload --save

步骤二：使用Express-fileupload中间件实现文件上传功能

在 Express 应用中引入 Express-fileupload 中间件，以便使用文件上传功能。具体步骤如下：

1. 在 app.js 文件中添加以下代码：

const express = require('express');
const fileupload = require('express-fileupload');

const app = express();

// File upload middleware
app.use(fileupload());

以上代码中，我们引入了 express 和 express-fileupload 模块，并在其中定义了一个 app 变量表示我们的 Express 应用。然后，我们使用 app.use() 方法引入了 Express-fileupload 中间件。

1. 在路由中使用 req.files 对象获取上传的文件

上传的文件可以通过 req.files 对象获取, 该对象中的属性名就是文件标签的 name 值, 对应的属性值就是文件数据. 如果上传的文件不止一个， req.files 就会成为一个对象数组。

示例代码：

app.post('/upload', (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

以上代码做了以下操作：

• 检查是否上传了文件，如果未上传则返回错误提示；
• 通过 req.files 对象获取上传的文件，并将其保存到指定的文件夹中。

示例一

在网站的后台管理中，需要添加一个上传文件的功能，让管理员可以上传图片或文件到服务器的指定目录下。我们可以通过Express 和 Express-fileupload 中间件轻松实现。

下面是一个完整的示例：

const express = require('express');
const fileupload = require('express-fileupload');

const app = express();
app.use(fileupload());

app.post('/upload', function(req, res) {
  if (!req.files) {
    return res.status(400).send('No files were uploaded.');
  }

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err) {
      return res.status(500).send(err);
    }
    res.send('File uploaded!');
  });
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

此示例演示了如何将上传的文件保存到服务器上。管理员可以通过后台管理上传图片或文件。

示例二

另外一个示例是在网站中添加一个用户头像上传功能。具体步骤如下：

1. 在用户编辑页面中添加 <input type="file" name="avatar"> 表单元素，允许用户上传头像。

2. 图片上传后，通过 Node.js 的 Express 框架接收文件并保存到服务器上。

示例代码：

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

// enable files upload
app.use(fileUpload({
    createParentPath: true
}));

// endpoint for uploading user's avatar
app.post('/api/avatar-upload', async (req, res) => {
  try {
    if(!req.files) {
        res.send({
            status: false,
            message: 'No file uploaded'
        });
    } else {
      // use the name of the input field (i.e. "avatar") to retrieve the uploaded file
      let avatar = req.files.avatar;

      // Use the mv() method to place the file in upload directory (i.e. "uploads")
      avatar.mv('./uploads/' + avatar.name);

      // send response
      res.send({
          status: true,
          message: 'File is uploaded',
          data: {
              name: avatar.name,
              mimetype: avatar.mimetype,
              size: avatar.size
          }
      });
    }
  } catch (err) {
      res.status(500).send(err);
  }
});

app.listen(3000, () => console.log('Server is running on http://localhost:3000'));

此示例演示了如何将上传的图片保存到服务器上，并返回文件相关信息。用户上传自己的头像，进行头像上传和更新。