NodeJS 从节点服务器发送文件到react客户端

iqxoj9l9  于 2023-10-17  发布在  Node.js
关注(0)|答案(1)|浏览(123)

我试图从react客户端获取文件名到我的节点服务器,然后根据名称发送我请求的文件。看起来是客户端的问题,但我不知道问题出在哪里。文件类型可以是PDF或任何类型的照片文件。谢谢
这是react中的相关代码:

useEffect(()=>{
    fetch('/documents/getDoc', {
      method: 'POST',
      body: JSON.stringify({ selectedDoc }),// sending the file name
    })
      .then(res => res.json())
      .then(res => {
        console.log('file: ',res);
        setDoc(res); // i want to save here the file

      });
  },[selectedDoc])

这是node中的服务器代码:

router.post('/getDoc', (req, res) => {
  const body = [];
  req.on('data', chunk => {
    body.push(chunk);
  });
  req.on('end', async () => {
    const obj = JSON.parse(body);
    console.log(obj);
    // const list = await getOpenDocList(obj.selectedCus)
    // res.end(JSON.stringify(list))
    // res.sendFile(__dirname + '../documents/' + obj.name)

        // Use path.join to create the correct file path
        const filePath = path.join(__dirname, '../documents/', obj.name);

        // Use res.sendFile to send the file
        res.sendFile(filePath, (err) => {
          if (err) {
            console.error('Error sending file:', err);
            res.status(404).send('File not found');
          }
        });
  });
});
osh3o9ms

osh3o9ms1#

首先,手动处理请求体是不必要的(尽管可能是一个很好的学习练习)。
Express内置JSON请求体解析中间件

app.use(express.json());

// ...

router.post('/getDoc', (req, res) => {
  const obj = req.body; // 👈 JSON body is already parsed

  // ...
});

您只需要确保发送的请求具有正确的标头

fetch('/documents/getDoc', {
  method: 'POST',
  body: JSON.stringify({ selectedDoc }),
  headers: { 'content-type': 'application/json' },
})

您的客户端代码使用res.json(),这只适用于响应是JSON格式的字符串。
要接收二进制(文件)对象,您需要使用res.blob()。有了它,您可以创建临时URL来显示,链接或下载

fetch("/documents/getDoc", {
  method: "POST",
  body: JSON.stringify({ selectedDoc }),
  headers: { "content-type": "application/json" },
})
  .then((res) => (res.ok ? res.blob() : Promise.reject(res)))
  .then((blob) => {
    const blobUrl = URL.createObjectURL(blob);
    // now do something with the URL
  });

相关问题