如何在Express.js API的GET请求中发送多张图片实现MEAN栈用户画廊？

首先明确：res.sendFile() 确实只能单次发送单个文件，没办法直接一次发送多张图片。不过我们可以换个更贴合画廊场景的思路——先返回该用户所有图片的元数据（比如文件路径、文件名），再让前端逐个加载每张图片，这样既能实现批量获取的需求，也更符合画廊的展示逻辑。

1. 后端（Node.js/Express）调整 #

步骤1：编写获取用户所有图片的接口 #

假设你的图片记录存在MongoDB的Uploads集合中，结构大概是这样：

{
  userId: ObjectId('用户ID'),
  filePath: '/uploads/20240512-abc.jpg',
  fileName: '我的旅行照.jpg',
  createdAt: Date
}

你可以新增一个GET接口，根据当前登录用户的ID查询所有属于他的图片记录：

const express = require('express');
const router = express.Router();
const Upload = require('../models/Upload'); // 你的图片数据模型
const path = require('path');

// 获取当前用户的所有图片列表
router.get('/user-gallery', async (req, res) => {
  try {
    // 这里假设你已经通过身份验证中间件拿到了当前用户ID，比如req.user._id
    const userId = req.user._id;
    // 查询该用户的所有图片，只返回需要的字段（减少数据传输）
    const userImages = await Upload.find({ userId }, 'filePath fileName createdAt')
      .sort({ createdAt: -1 }); // 按上传时间倒序排列

    res.status(200).json(userImages);
  } catch (err) {
    res.status(500).json({ message: '获取图片列表失败', error: err.message });
  }
});

// 把上传目录设为静态资源，让前端能直接访问图片
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

步骤2：确保静态文件可访问 #

上面代码最后一行的作用是把你存放图片的uploads目录设为静态资源目录，这样前端就能通过/uploads/文件名的URL直接访问图片了。

2. 前端（AngularJS）实现 #

步骤1：调用接口获取图片列表 #

在AngularJS控制器中，发送请求拿到图片数组，并拼接出完整的图片访问URL：

app.controller('GalleryController', ['$scope', '$http', function($scope, $http) {
  // 加载用户画廊
  $http.get('/api/user-gallery')
    .then(function(response) {
      // 给每个图片对象添加完整访问URL
      $scope.userImages = response.data.map(img => ({
        ...img,
        fullUrl: '/uploads/' + img.filePath.split('/').pop() // 根据你的实际路径调整拼接逻辑
      }));
    })
    .catch(function(error) {
      console.error('加载画廊失败:', error);
      $scope.errorMsg = '加载图片失败，请稍后重试';
    });
}]);

步骤2：在视图中渲染画廊 #

用ng-repeat遍历图片列表，把每张图片渲染到页面上：

<div class="gallery-container" ng-controller="GalleryController">
  <div class="gallery-item" ng-repeat="img in userImages">
    <img ng-src="{{img.fullUrl}}" alt="{{img.fileName}}" class="gallery-img">
    <p class="img-name">{{img.fileName}}</p>
  </div>
  <p class="error" ng-if="errorMsg">{{errorMsg}}</p>
</div>

可选优化：批量下载图片（如果需要） #

如果用户需要一次性下载所有图片，你可以用archiver库把图片打包成ZIP文件再发送：

const archiver = require('archiver');

router.get('/user-gallery/download', async (req, res) => {
  try {
    const userId = req.user._id;
    const userImages = await Upload.find({ userId }, 'filePath');
    
    // 设置响应头，告诉浏览器这是一个下载文件
    res.attachment('我的画廊.zip');
    const archive = archiver('zip', { zlib: { level: 9 } }); // 高压缩级别
    archive.pipe(res);
    
    // 把每张图片添加到压缩包中
    userImages.forEach(img => {
      const fullFilePath = path.join(__dirname, img.filePath);
      archive.file(fullFilePath, { name: path.basename(fullFilePath) });
    });
    
    await archive.finalize();
  } catch (err) {
    res.status(500).json({ message: '打包图片失败', error: err.message });
  }
});

这样用户点击下载按钮时，请求这个接口就能拿到包含所有图片的ZIP文件了。

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