用 Node.js 实现一个上传图片接口

初始化项目

在当前目录下创建一个名为 upload-image-api 的新文件夹,并初始化一个包含默认设置的 package.json 文件。

bash 复制代码
mkdir upload-image-api && cd upload-image-api
npm init -y

安装依赖

express 是一个流行的 Node.js Web 框架;multer 是一个用于处理文件上传的中间件。

bash 复制代码
npm install express multer

创建上传图片接口

在根目录下创建一个 index.js 入口文件,并实现简单的上传图片逻辑。

js 复制代码
const express = require("express");
const multer = require("multer");
const path = require("path");

const app = express();

// 设置存储路径和文件名称
const storage = multer.diskStorage({
  destination: path.join(__dirname, "uploads"),
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(
      null,
      file.fieldname + "-" + uniqueSuffix + path.extname(file.originalname)
    );
  },
});

// 创建文件上传中间件
const upload = multer({ storage: storage });

/**
 * 处理文件上传请求
 * upload.single('image') 函数中 `image` 为接收文件的参数名
 */
app.post("/upload", upload.single("image"), (req, res, next) => {
  if (!req.file) {
    return res.status(400).json({ error: "No file uploaded" });
  }

  const filePath = req.file.path;
  res.json({ filePath: filePath });
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

测试上传图片接口

  • 启动服务,在终端中执行命令:node index.js
  • 使用 Postman 或其他工具来测试图片上传接口。
  • http://localhost:3000/upload 发送 POST 请求,并以 multipart/form-data 格式附加一个名为 image 的字段来上传图片。
  • 如果请求成功,你将收到一个包含上传后的文件路径的 JSON 响应。
相关推荐
layman05289 小时前
node.js 实战——餐厅静态主页编写(express+node+ejs+bootstrap)
node.js·bootstrap·express
哎哟喂_!1 天前
深入理解 Node.js 模块化(CommonJS):原理、用法与避坑指南
node.js
阿里小阿希1 天前
解决 pnpm dev 运行报错的坎坷历程
前端·node.js
Q_Q19632884751 天前
python小区物业管理系统-小区物业报修系统
开发语言·spring boot·python·django·flask·node.js·php
老兵发新帖1 天前
NestJS 框架深度解析
后端·node.js
Q_Q19632884752 天前
python小说网站管理系统-小说阅读系统
开发语言·spring boot·python·django·flask·node.js·php
m0_zj2 天前
57.[前端开发-前端工程化]Day04-webpack插件模式-搭建本地服务器
前端·webpack·node.js
盛夏绽放2 天前
Vue3 + Node.js 实现客服实时聊天系统(WebSocket + Socket.IO 详解)
websocket·网络协议·node.js
layman05282 天前
node.js 实战——express图片保存到本地或服务器(七牛云、腾讯云、阿里云)
node.js·express
m0_zj2 天前
58.[前端开发-前端工程化]Day05-webpack-Git安装-配置-Git命令
前端·webpack·node.js