Question

Q1）在我的reactjs应用程序中，我正在尝试从后端Nodejs服务器获取API。 API会根据请求响应图像文件。

我可以在http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg

上访问和查看图片文件

但在我的reactjs客户端，我在控制台日志中收到此错误。

Uncaught（在promise中）SyntaxError：位于0的JSON中的意外标记<

Reactjs：

let fetchURL = 'http://192.168.22.124:3000/source/';
  let image = name.map((picName) => {
    return picName
  })

  fetch(fetchURL + image)
  .then(response => response.json())
  .then(images => console.log(fetchURL + images));

Nodejs：

app.get('/source/:fileid', (req, res) => {
const { fileid } = req.params;
res.sendFile(__dirname + /data/ + fileid); 
});

有没有比我上面做的更好的方法？

Q2）另外，如何为空变量赋值（它存在于获取函数之外）
jpg = fetchURL +图像; 所以我可以在某个地方访问它。

Answer 1

服务器的响应是文件，而不是JSON格式的文本。您需要更改Blob响应的解析器。

var outside

fetch(fetchURL + image)
  //                         vvvv
  .then(response => response.blob())
  .then(images => {
      // Then create a local URL for that image and print it 
      outside = URL.createObjectURL(images)
      console.log(outside)
  })

从API获取图像

1 个答案: