使用nodejs+express实现简单的文件上传功能

实现一个简单的文件上传功能主要分为三个步骤：

1. 创建上传表单
2. 配置express路由
3. 处理上传文件

下面逐步介绍实现方法。

1. 创建上传表单

前端代码：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

这里的enctype属性必须设置为"multipart/form-data"，否则无法上传文件。

1. 配置express路由

后端代码：

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    const extension = file.originalname.split('.').pop();
    cb(null, file.fieldname + '-' + Date.now() + '.' + extension)
  }
});

const upload = multer({ storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('上传成功');
});

app.listen(3000, () => {
  console.log('服务器启动成功');
});

multer是一个nodejs的上传中间件，用于处理文件上传的功能。在这个例子中，我们定义了一个storage对象来指定上传文件的存储地址和文件名。上传的文件将保存在项目根目录下的uploads文件夹中。

使用upload.single('file')来接受上传的文件，其中'file'是上传表单中input[type="file"]的name属性。

1. 处理上传文件

通过实际示例来说明如何处理上传的文件，以下是一个简单的上传图片的例子。

前端代码：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image">
  <input type="submit" value="上传">
</form>

后端代码：

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    const extension = file.originalname.split('.').pop();
    cb(null, file.fieldname + '-' + Date.now() + '.' + extension)
  }
});

const upload = multer({ storage });

app.get('/', (req, res) => {
  res.send(`
    <form action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="image">
      <input type="submit" value="上传图片">
    </form>
  `);
});

app.post('/upload', upload.single('image'), (req, res) => {
  res.send(`
    <h1>上传成功</h1>
    <img src="/${req.file.path}" />
  `);
});

app.listen(3000, () => {
  console.log('服务器启动成功');
});

这个例子中我们上传了一张图片，并在上传成功后返回给前端一个img标签，显示刚刚上传的图片。其中${req.file.path}表示文件路径，通过src属性来显示图片。

除了单个文件上传，还可以使用upload.array()或upload.fields()来批量上传或指定上传字段。

示例说明：

假设现在我们需要实现一个上传多个文件的功能，前端代码如下：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="images" multiple>
  <input type="submit" value="上传">
</form>

后端代码如下：

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    const extension = file.originalname.split('.').pop();
    cb(null, file.fieldname + '-' + Date.now() + '.' + extension)
  }
});

const upload = multer({ storage });

app.get('/', (req, res) => {
  res.send(`
    <form action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="images" multiple>
      <input type="submit" value="上传图片">
    </form>
  `);
});

app.post('/upload', upload.array('images'), (req, res) => {
  res.send(`
    <h1>上传成功</h1>
    ${req.files.map(file => `<img src="/${file.path}" />`).join('')}
  `);
});

app.listen(3000, () => {
  console.log('服务器启动成功');
});

与上传单个文件的例子类似，只需要使用upload.array()来处理上传的多个文件，其中'images'表示上传表单中input[type="file"]的name属性。在上传成功后，我们通过map方法将所有上传的图片都显示出来，使用.join()方法将数组连接为一个字符串渲染到前端页面中。

以上就是使用nodejs+express实现简单的文件上传功能的完整攻略。