node.js实现图片上传

小旭@

于 2023-12-16 16:53:15 发布

阅读量826

点赞数 14

文章标签： node.js

本文链接：https://blog.csdn.net/yzx231858/article/details/135034827

版权

当在Node.js中实现图片上传时，我们可以用以下方式详细实现：

1. 初始化项目

确保已安装Node.js和npm（Node.js包管理器）。

创建一个新的目录，并在其中初始化一个新的Node.js项目。在命令行中执行以下命令：

mkdir image-upload-app
cd image-upload-app
npm init -y

2. 安装依赖

在项目目录下执行以下命令安装所需的依赖：

npm install express multer

express: 用于构建Web应用程序。
multer: 用于处理文件上传的中间件。

3. 编写代码

创建一个名为app.js的文件，并编写以下代码：

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

// 设置存储引擎并指定上传的目标目录
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 存储到 uploads 目录
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) // 在保存时修改文件名
  }
})

const upload = multer({ 
  storage: storage,
  limits: { fileSize: 1000000 } // 限制文件大小为 1MB
}).single('image');

// 单个文件上传的路由
app.post('/upload', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      // 处理错误
      console.error(err);
      res.status(400).send('Error uploading file');
    } else {
      // 文件已上传成功
      res.send('File uploaded successfully');
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

4. 创建存储目录

在项目根目录下创建一个名为uploads的目录，用于存储上传的图片。

5. 启动服务器

在命令行中执行以下命令启动服务器：

node app.js

6. 前端集成

在前端页面中，可以通过表单提交方式将图片上传到上述创建的接口。

<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <h1>Upload an Image</h1>
  <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" />
    <input type="submit" value="Upload Image" />
  </form>
</body>
</html>