如何从Nuxt3服务器端点返回二进制数据？现有实现返回无效数据

我尝试通过Nuxt3服务器端点返回二进制数据，数据大小通常在数MB级别，但当前实现返回的数据无效，不确定问题出在哪。以下是我的代码实现：

import { useS3 } from '#myApp/s3'

export default defineEventHandler(async (event) => {
  const { client } = await useS3()
  const bucket = event.context.params.bucket
  const objectKey = getHeader(event, 'content-location')
  const filename = objectKey.split('/').pop()

  if (!objectKey) {
    throw createError({
      statusCode: 400,
      statusMessage: 'Object Key Not Defined',
      message: 'content-location header should include the object key',
    })
  }

  // set headers
  setHeader(event, 'content-disposition', `attachment; filename="${filename}"`)
  setHeader(event, 'Transfer-Encoding', 'chunked')

  // begin stream
  const stream = await client.getObject(bucket, objectKey)
  const buffer = await ToBuffer(stream)
  return buffer
})

function ToBuffer(stream): Promise<Buffer> {
  const chunks = [] as Buffer[]
  return new Promise((resolve, reject) => {
    stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)))
    stream.on('error', (err) => reject(err))
    stream.on('end', () => resolve(Buffer.concat(chunks)))
  })
}

问题分析与修复方案 #

你的代码存在几个关键问题，导致返回的二进制数据无效：

1. 不必要的Buffer转换：将S3流全量转成Buffer再返回，会把整个大文件加载到内存，不仅浪费资源，还可能因内存溢出导致数据损坏，完全违背了流传输的初衷。
2. 手动设置分块传输头部冲突：Transfer-Encoding: chunked不需要手动设置，Nuxt会自动根据返回的流处理分块逻辑，手动设置反而可能和框架内部逻辑冲突。
3. 缺少Content-Type头部：客户端无法识别文件类型，会导致解析异常。
4. 文件名转义错误："的转义方式不符合HTTP规范，特殊字符文件名会解析失败。

修正后的代码：

import { useS3 } from '#myApp/s3'
import { createError } from 'h3'

export default defineEventHandler(async (event) => {
  const { client } = await useS3()
  const bucket = event.context.params.bucket
  const objectKey = getHeader(event, 'content-location')
  const filename = objectKey.split('/').pop()

  if (!objectKey) {
    throw createError({
      statusCode: 400,
      statusMessage: 'Object Key Not Defined',
      message: 'content-location header should include the object key',
    })
  }

  // 建议从S3对象元数据中获取真实Content-Type，这里用默认二进制类型示例
  const contentType = 'application/octet-stream'

  // 设置正确的响应头部
  setHeader(event, 'content-disposition', `attachment; filename="${encodeURIComponent(filename)}"`)
  setHeader(event, 'Content-Type', contentType)

  // 直接返回S3流，Nuxt自动处理分块传输
  const stream = await client.getObject(bucket, objectKey)
  return stream
})

补充说明 #

• 直接返回流可以避免内存过载，同时让Nuxt自动处理分块传输逻辑，减少手动配置错误。
• 使用encodeURIComponent处理文件名，确保包含特殊字符的文件名能被客户端正确解析。
• 如果你的S3客户端支持获取对象元数据，优先从元数据中读取Content-Type，能更准确匹配文件类型。

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