使用JavaScript Express实现服务器向客户端发送多文件

你遇到的关键问题是HTTP协议规定一个请求只能对应一个响应：res.sendFile调用后会自动结束当前响应流程，循环里多次调用时，第一次调用就已经把响应发送完毕，后续的调用试图往已关闭的响应流里写入内容，必然会触发报错。

下面提供两种符合HTTP规范的实现方式，分别适配「浏览器直接展示」和「批量下载」场景：

方法一：返回图片URL列表，客户端按需加载（推荐用于浏览器展示） #

这是浏览器展示多图的常规方案：先让服务器返回所有图片的可访问URL，客户端再通过这些URL逐个加载图片并展示。

服务器端代码调整 #

const express = require('express');
const fs = require('fs');
const app = express();

// 托管images文件夹，客户端可直接通过 /images/xxx.jpg 访问单张图片
app.use('/images', express.static(__dirname + '/images'));

// 返回图片列表接口
app.get('/files', (req, res) => {
  try {
    const files = fs.readdirSync(__dirname + "/images/");
    // 可选：过滤非图片文件（根据你的实际文件类型调整后缀）
    const imageFiles = files.filter(file => {
      const ext = file.toLowerCase().split('.').pop();
      return ['jpg', 'jpeg', 'png', 'gif'].includes(ext);
    });
    // 返回图片的完整访问URL数组
    res.json(imageFiles.map(file => `/images/${file}`));
  } catch (err) {
    res.status(500).json({ error: '读取图片文件夹失败' });
  }
});

app.listen(3000);

客户端示例代码 #

<div id="image-container"></div>

<script>
// 请求图片列表并渲染
fetch('/files')
  .then(res => res.json())
  .then(imageUrls => {
    const container = document.getElementById('image-container');
    imageUrls.forEach(url => {
      const img = document.createElement('img');
      img.src = url;
      img.style.margin = '10px';
      img.style.width = '200px';
      container.appendChild(img);
    });
  })
  .catch(err => console.error('加载图片失败:', err));
</script>

方法二：打包成ZIP文件发送（适合批量下载场景） #

如果需要一次性把所有图片发给用户下载，可以将图片打包为ZIP后发送：

1. 先安装依赖包：npm install archiver
2. 服务器端代码：

const archiver = require('archiver');

app.get('/download-images', (req, res) => {
  res.attachment('images.zip'); // 设置下载文件名
  const archive = archiver('zip', { zlib: { level: 9 } });

  archive.pipe(res);
  // 将整个images文件夹添加到压缩包
  archive.directory(__dirname + '/images/', false);
  archive.finalize();
});

访问/download-images时，客户端会自动下载包含所有图片的ZIP文件。

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