使用 NextJS API 发送文件作为响应

Question

如题，

在 NodeJs + Express 中，我可以使用以下行返回一个文件作为响应

res.sendFile(absolute_path_to_the_file)

假设我想从 NextJs 目录中的输出文件夹返回单个图像，我如何使用 NextJs API 实现这一点？我只能看到 res.send() 和 res.json() 作为返回响应的方式，我不确定如何利用它将图像作为响应返回给调用者。

如果我喜欢这个

res.send(absolute_path_to_the_file)

它只会向我发送目录路径的字符串。我期望的是从目录路径表示的目录发送的图像。

在这里需要帮助。

Answer 1

根据NextJS 13，当使用App Router时，您可以按以下方式执行操作：

// before
res.status(200).setHeader('content-type', 'image/png').send(data);

// after
return new Response(data, { headers: { 'content-type': 'image/png' } });
// or
const response = new NextResponse(data)
response.headers.set('content-type', 'image/png');
return response;

注意：data可以是Blob/Stream/Buffer。

有关更多信息，请参阅此GitHub 问题。

Answer 2

在这里为那些也想知道的人回答我自己的问题..

我在 NextJS 中做了一个关于它的线程，他们给了我一个很好的答案 -这里

这样做的两种方法是使用 readStream

var filePath = path.join(__dirname, 'myfile.mp3');
    var stat = fileSystem.statSync(filePath);

    response.writeHead(200, {
        'Content-Type': 'audio/mpeg',
        'Content-Length': stat.size
    });

    var readStream = fileSystem.createReadStream(filePath);
    // We replaced all the event handlers with a simple call to readStream.pipe()
    readStream.pipe(response);

或将对象更改为缓冲区并使用发送方法

/*
Project structure:
.
??? images_folder
?   ??? next.jpg
??? package.json
??? pages
?   ??? api
?   ?   ??? image.js
?   ??? index.js
??? README.md
??? yarn.lock
*/

// pages/api/image.js

import fs from 'fs'
import path from 'path'

const filePath = path.resolve('.', 'images_folder/next.jpg')
const imageBuffer = fs.readFileSync(filePath)

export default function(req, res) {
  res.setHeader('Content-Type', 'image/jpg')
  res.send(imageBuffer)
}

这两个答案都适用于我的情况。使用process.cwd()导航到文件/图像，需要加以发送的响应。