我正在尝试在我的 react 应用程序中预览图像。我正在尝试使用 Node 获取来获取二进制数据作为流,并在响应时将响应数据发送回以使用正确的内容类型对应用程序使用react。 React 代码运行良好,因为我已经通过直接访问 API 对其进行了测试。我尝试了下面的代码,但无法理解如何配置响应以发送二进制数据。
fetch(doc_preview_url, requestOptions)
.then((response) => {
res.setHeader("Content-Type", response.headers.get('content-type'));
res.send(response.status).send(response.buffer());
})
.catch((error) => {
errorHandler(error);
});
请注意,我在 Node.js 中使用 axios 尝试过此操作,但虽然 axios 对于 PDF 工作正常,但对于图像却失败了(损坏了二进制数据)。通过上面的代码,我收到了二进制数据,但数据似乎也已损坏。当我尝试使用相同的方法在 React 中创建 objectUrl 时,它不会在浏览器中显示正确的文件。
最佳答案
使用response.buffer()作为一个 promise ,并在完成后发送响应。我的代码的问题是我在完成数据获取之前发送了数据。
fetch(doc_preview_url, requestOptions)
.then((response) => {
const contentType = response.headers.get("content-type");
response.buffer().then((buffer) => {
res.setHeader("Content-Type", contentType);
res.status(200).send(buffer);
});
})
.catch((error) => {
global.logger.logMethodExecutionTime(
"documentServices.previewDocument ended with error",
hrstart
);
关于node.js - 使用 node-fetch 获取二进制文件并发送以作为二进制数据进行 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68581978/