expressjs，实现上传图片，返回图片链接

读心悦

于 2024-10-05 23:10:37 发布

阅读量254

点赞数 7

分类专栏： Node 文章标签： javascript node.js express

本文链接：https://blog.csdn.net/xuelian3015/article/details/142720423

版权

Node 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

在 Express.js 中实现图片上传并返回图片链接，你通常需要使用一个中间件来处理文件上传，比如 multer。multer 是一个 node.js 的中间件，用于处理 multipart/form-data 类型的表单数据，主要用于上传文件。

以下是一个简单的示例，展示了如何使用 multer 在 Express.js 中实现图片上传，并返回上传后的图片链接：

首先，安装 multer 和 express（如果还没有安装的话）：

npm install express multer

创建一个 Express 应用，并配置 multer：

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

// 设置存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/'); // 保存文件的目录
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)); // 使用时间戳和文件扩展名来命名文件
  }
});

// 初始化 multer 上传
const upload = multer({ storage: storage });

// 创建一个目录来保存上传的文件（如果不存在的话）
const fs = require('fs');
const uploadDir = './uploads';
if (!fs.existsSync(uploadDir)){
    fs.mkdirSync(uploadDir);
}

// 创建一个路由来处理文件上传
app.post('/upload', upload.single('image'), (req, res) => {
  try {
    // 获取文件信息
    const file = req.file;
    if (!file) {
      return res.status(400).json({ message: 'Please upload a file' });
    }

    // 构建图片链接（这里假设你的服务器运行在 localhost:3000）
    const imageUrl = `http://localhost:${port}/uploads/${file.filename}`;

    // 返回图片链接
    res.json({ message: 'File uploaded successfully', imageUrl: imageUrl });
  } catch (error) {
    res.status(500).json({ message: 'Error uploading file', error: error.message });
  }
});

// 创建一个路由来访问上传的文件（可选，但通常用于测试或预览）
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

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

创建一个 HTML 表单来测试图片上传：

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