express 上传图片-JavaScript中文网-JavaScript教程资源分享门户

在Web应用程序中，允许用户上传文件（如图片）是一项非常常见的任务。在本文中，我们将介绍如何使用Node.js Web框架Express来实现基本的图片上传功能。

前置条件

在开始之前，请确保您已经安装了Node.js和npm包管理器，并且已经创建了一个基本的Express应用程序。

安装依赖

为了实现图片上传，我们需要使用一个名为multer的npm包。它是一个Node.js中间件，用于处理multipart/form-data类型的表单数据，例如文件上传。

你可以通过运行以下命令安装它：

npm install --save multer

实现图片上传

在路由文件中引入multer
```
const multer = require('multer');
```

定义存储的位置和文件名

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

上面的代码将上传的文件存储在uploads/目录下，并将文件名设置为当前时间戳加上原始文件名。

创建multer对象

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

添加路由处理函数
```
router.post('/upload', upload.single('image'), (req, res) => {
  res.send('Image uploaded successfully');
});
```
上面的代码处理/upload路由，使用upload.single()函数指定接收名为image的文件。在这个例子中，我们只接受单个文件。如果您需要上传多个文件，请使用upload.array()。

创建表单

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="image">
  <br>
  <button type="submit">Upload</button>
</form>

在HTML表单中，将enctype属性设置为multipart/form-data以支持文件上传。

测试上传

现在您已准备好测试您的图片上传功能了！打开浏览器访问http://localhost:3000/upload，选择一个图片文件并点击上传按钮。如果一切顺利，您将看到“Image uploaded successfully”消息。

总结

在本文中，我们介绍了如何使用Express和multer实现基本的图片上传功能。虽然此示例只上传单个文件，但multer支持上传多个文件和其他类型的表单数据。希望这篇文章对您有所帮助，让您能够更轻松地实现Web应用程序中的文件上传功能。

完整代码示例：

-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------

----- --- - ----------
----- ------ - -----------------

----- ------- - --------------------
  ------------ -------- ----- ----- --- -
    -------- ------------
  --
  --------- -------- ----- ----- --- -
    -------- ---------- - --- - -------------------
  -
---

----- ------ - -------- -------- ------- ---

---------------------- ----------------------- ----- ---- -- -
  --------------- -------- ---------------
---

------------ --------

---------------- -- -- ------------------- ------- -- ---- --------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/51504