nodejs 上传图片超详细，超实用

自然醒L

已于 2023-12-18 08:33:56 修改

阅读量975

点赞数 1

分类专栏：前端文章标签：前端 node.js

于 2023-12-16 15:53:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62981580/article/details/135033496

版权

前端专栏收录该内容

7 篇文章

订阅专栏

当使用Node.js上传图片时，可以按照以下步骤进行操作。首先，确保已经安装了Node.js，并创建一个新的项目文件夹。

步骤 1：初始化项目

在命令行中进入项目文件夹，运行以下命令来初始化项目并生成 package.json 文件：

npm init -y

步骤 2：安装所需的包

接下来，您需要安装 Express 和 Multer 这两个 Node.js 包，这两个包能帮助您处理文件上传的功能。

npm install express multer

步骤 3：创建服务器

创建一个名为 app.js 或者 index.js 的文件，并编写以下代码以创建一个简单的 Express 服务器，并配置 Multer 来处理文件上传

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/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
  }
});

// 使用Multer中间件配置上传
const upload = multer({ storage: storage });

// 处理上传的POST请求
app.post('/upload', upload.single('image'), (req, res) => {
  res.send('文件已上传');
});

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

步骤 4：创建上传页面

创建一个简单的 HTML 页面，用于测试文件上传功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>
<body>
  <h1>文件上传</h1>
  <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">上传</button>
  </form>
</body>
</html>