如何将HTML中的图片传输至Node.js并在EJS中使用？

1. 前端表单调整 #

确保表单设置正确的enctype以支持文件上传，同时保留你的预览逻辑：

<!-- home.ejs 中的表单 -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" id="imageInput">
  <!-- 你的预览元素 -->
  <img id="preview" src="" alt="预览图" style="display: none;">
  <button type="submit">上传并显示图片</button>
</form>

<!-- 预览逻辑的JS（你已实现，这里仅作参考） -->
<script>
const imageInput = document.getElementById('imageInput');
const preview = document.getElementById('preview');

imageInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function() {
      preview.src = reader.result;
      preview.style.display = 'block';
    };
    reader.readAsDataURL(file);
  }
});
</script>

2. 后端配置与文件处理 #

安装依赖 #

首先安装multer（Express处理文件上传的常用库）：

npm install multer

配置Express与Multer #

在你的Express入口文件（如app.js）中添加以下配置：

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

// 设置静态文件目录（用于访问上传后的图片）
app.use(express.static('public'));

// 配置Multer存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 确保public/uploads文件夹已提前创建
    cb(null, 'public/uploads/');
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免覆盖
    const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}${path.extname(file.originalname)}`;
    cb(null, uniqueName);
  }
});

// 初始化Multer，可添加文件类型验证
const upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    const allowedTypes = /jpeg|jpg|png|gif/;
    const isValidExt = allowedTypes.test(path.extname(file.originalname).toLowerCase());
    const isValidMime = allowedTypes.test(file.mimetype);
    if (isValidExt && isValidMime) {
      cb(null, true);
    } else {
      cb(new Error('仅支持JPG/PNG/GIF格式的图片'));
    }
  }
});

// 设置EJS为模板引擎
app.set('view engine', 'ejs');

处理上传请求 #

添加路由接收上传的文件，并将图片链接传递给EJS页面：

// 首页路由，初始渲染时无图片链接
app.get('/home', (req, res) => {
  res.render('home');
});

// 上传处理路由
app.post('/upload', upload.single('image'), (req, res) => {
  // 生成可访问的图片URL（public为静态目录，所以路径从/uploads开始）
  const imageUrl = `/uploads/${req.file.filename}`;
  // 渲染首页并传递图片链接
  res.render('home', { imageUrl });
});

app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000/home');
});

3. EJS页面渲染图片 #

在home.ejs中添加图片渲染逻辑，根据传递的imageUrl显示图片：

<!-- home.ejs 中添加图片展示区域 -->
<% if (typeof imageUrl !== 'undefined') { %>
  <h3>上传的图片：</h3>
  <img src="<%= imageUrl %>" alt="用户上传的图片" style="max-width: 500px;">
<% } %>

注意事项 #

• 提前创建public/uploads文件夹，否则Multer会抛出文件路径不存在的错误
• 可根据需求调整图片存储路径、文件名规则或文件大小限制（在Multer配置中添加limits选项）

内容的提问来源于stack exchange，提问作者espo