如何控制Firebase Storage文件公共URL的下载文件名？

你当前的场景是用Firestore文档ID作为Firebase Storage的文件名来避免冲突，同时需要让其他用户通过URL下载时使用自定义文件名（从Firestore存储的元数据中获取）。现有通过重定向到公共URL的方案存在文件名不友好、无扩展名的问题，同时你担心代理文件流的性能和视频范围请求问题，下面提供两种可行的解决方案：

方案一：使用签名URL（推荐） #

公共URL无法直接指定下载文件名，但签名URL可以通过配置contentDisposition参数强制浏览器使用自定义文件名，而且无需将文件设为公开（安全性更高），下载请求直接走Firebase Storage的CDN，性能和成本表现更优。

实现步骤 #

1. 从请求URL中解析文件ID，查询Firestore获取对应的自定义文件名（需包含扩展名，例如"旅行照片.jpg"）。
2. 生成签名URL时，配置contentDisposition选项指定下载文件名。
3. 重定向到签名URL，或直接返回URL给前端跳转。

代码示例 #

exports.downloadFile = functions.http.onRequest(async (req, res) => {
  // 解析文件ID（根据你的URL结构调整逻辑）
  const fileId = req.path.split('/').pop();
  // 查询Firestore获取自定义文件名
  const docSnapshot = await admin.firestore().collection('files').doc(fileId).get();
  
  if (!docSnapshot.exists) {
    return res.status(404).send('文件不存在');
  }

  const { fileName } = docSnapshot.data();
  const file = admin.storage().bucket().file(fileId);
  const [doesExist] = await file.exists();
  
  if (!doesExist) {
    return res.status(404).send('文件不存在');
  }

  // 生成带自定义文件名的签名URL
  const expiresIn = 60 * 60 * 24; // 有效期1天，可按需调整
  const [url] = await file.getSignedUrl({
    action: 'read',
    expires: Date.now() + expiresIn * 1000,
    // 用encodeURIComponent处理中文/特殊字符文件名，避免乱码
    contentDisposition: `attachment; filename="${encodeURIComponent(fileName)}"`
  });

  return res.redirect(url);
});

补充说明 #

• 如果需要在线预览而非强制下载，可将attachment改为inline。
• 签名URL无需设置文件公开，还能控制有效期，比makePublic的方式更安全。

方案二：HTTP函数代理（支持范围请求） #

如果需要额外的自定义逻辑（比如复杂权限校验），可以采用代理文件流的方式，但必须手动处理范围请求（视频拖拽播放、大文件断点续传依赖该功能），同时设置正确的响应头指定文件名。

实现步骤 #

1. 解析文件ID，查询Firestore获取自定义文件名和文件元数据（如Content-Type）。
2. 处理请求头中的Range字段，生成对应范围的文件流。
3. 设置响应头：包括Content-Disposition（指定文件名）、Content-Type、Accept-Ranges，以及范围请求对应的Content-Range和状态码。

代码示例 #

exports.proxyDownload = functions.http.onRequest(async (req, res) => {
  const fileId = req.path.split('/').pop();
  const docSnapshot = await admin.firestore().collection('files').doc(fileId).get();
  
  if (!docSnapshot.exists) {
    return res.status(404).send('文件不存在');
  }

  const { fileName, contentType } = docSnapshot.data();
  const file = admin.storage().bucket().file(fileId);
  const [doesExist, fileMetadata] = await Promise.all([file.exists(), file.getMetadata()]);
  
  if (!doesExist) {
    return res.status(404).send('文件不存在');
  }

  const fileSize = parseInt(fileMetadata[0].size);
  const rangeHeader = req.headers.range;

  // 处理范围请求
  if (rangeHeader) {
    const parts = rangeHeader.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    const chunksize = (end - start) + 1;

    res.writeHead(206, {
      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunksize,
      'Content-Type': contentType,
      'Content-Disposition': `attachment; filename="${encodeURIComponent(fileName)}"`
    });

    const stream = file.createReadStream({ start, end });
    stream.pipe(res);
  } else {
    // 处理普通请求
    res.writeHead(200, {
      'Content-Length': fileSize,
      'Content-Type': contentType,
      'Content-Disposition': `attachment; filename="${encodeURIComponent(fileName)}"`,
      'Accept-Ranges': 'bytes'
    });

    const stream = file.createReadStream();
    stream.pipe(res);
  }
});

补充说明 #

• 该方案会让流量经过HTTP函数，成本比签名URL高，函数执行时间也更长，仅适合需要额外自定义逻辑的场景。

方案对比 #

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