无需保存文件，如何直接显示multipart/form-data上传的图片？

当然有办法跳过文件复制步骤，直接把上传的图片在<img>标签里显示！下面给你两种实用的实现思路：

方案1：将文件转为Base64编码直接嵌入 #

你可以把临时文件的内容读取出来，转成Base64格式的Data URI，直接赋值给<img>的src属性，不用存到指定目录。

代码示例（Node.js + Express + Multer场景）： #

const fs = require('fs');

// 假设这是你的上传接口
app.post('/upload', upload.single('image'), (req, res) => {
  // 读取临时文件内容
  const imageBuffer = fs.readFileSync(req.file.path);
  // 转成Base64，拼接Data URI格式（自动匹配文件实际类型）
  const base64Image = `data:${req.file.mimetype};base64,${imageBuffer.toString('base64')}`;
  
  // 返回给前端，前端直接用这个字符串作为img的src
  res.send({ imageSrc: base64Image });
});

前端使用时：

<!-- 拿到后端返回的imageSrc后 -->
<img src="{{ imageSrc }}" alt="上传的图片" />

注意：这种方式适合小体积图片，因为Base64编码会让文件体积增加约30%，大图片可能影响加载性能。

方案2：创建临时文件服务路由 #

另一种方式是在后端创建一个专门的路由，负责读取临时文件并返回图片流，前端通过这个路由地址访问图片，不用复制文件到uploads目录。

代码示例： #

首先保留Multer默认的磁盘临时存储（注意要定期清理临时文件，避免磁盘占用）：

const multer = require('multer');
// 默认会把文件存在系统临时目录
const upload = multer();

然后创建服务路由：

const fs = require('fs');
const path = require('path');
const os = require('os');

app.get('/serve-temp-image', (req, res) => {
  // 用文件的唯一文件名拼接临时路径，避免直接暴露系统路径（安全优化）
  const tempFilePath = path.join(os.tmpdir(), req.query.filename);
  
  // 设置正确的响应头
  res.setHeader('Content-Type', req.query.mimetype);
  // 读取文件并返回流
  fs.createReadStream(tempFilePath).pipe(res);
});

上传接口里返回路由地址：

app.post('/upload', upload.single('image'), (req, res) => {
  const imageSrc = `/serve-temp-image?filename=${req.file.filename}&mimetype=${encodeURIComponent(req.file.mimetype)}`;
  res.send({ imageSrc });
});

前端使用：

<img src="{{ imageSrc }}" alt="上传的图片" />

进阶优化：如果不想使用磁盘临时文件，可以配置Multer用memoryStorage，让文件直接存在内存的buffer里，不用写磁盘：

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 上传接口里直接用req.file.buffer
app.post('/upload', upload.single('image'), (req, res) => {
  // 转Base64直接用buffer
  const base64Image = `data:${req.file.mimetype};base64,${req.file.buffer.toString('base64')}`;
  res.send({ imageSrc: base64Image });
  
  // 或者直接返回buffer作为图片响应
  // res.setHeader('Content-Type', req.file.mimetype);
  // res.send(req.file.buffer);
});

这种内存存储的方式更高效，也不用清理临时文件，但要注意内存占用，不适合上传超大文件。

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