在 React 中使用 Infura API 和 ipfs-http-client 检索存储在 IPFS 上的 JPG 图像

Question

我使用 infura API 和 ipfs-http-client 在 ipfs 上上传了一张 jpg 图片。该文件取自 type=file 的输入。事件监听器是 onchange。

// imports
const IpfsHttpClient = require("ipfs-http-client");
const ipfsC = IpfsHttpClient({
  host: "ipfs.infura.io",
  port: "5001",
  protocol: "https",
});

<input type="file" onChange={(e) => { upload(e); }} />

  const upload = async (e) => {
    const file = e.target.files[0];
    const added = await ipfsC.add(file, {
      progress: (prog) => console.log(`received: ${prog}`),
    });
    console.log(added)
  };

我得到的散列是 QmQnSWbsck26xrFRiowdV2JhP7cbKRc9KbjWinRhmJgiMa。现在我正在尝试检索图像并将其显示在网络应用程序上。 我应该如何进一步。

Answer 1

这是 v0 CID。您可以在 IPFS docs here.

中了解有关 CID 和不同版本的更多信息

您可以通过CID检查器查看更多编码信息：

https://cid.ipfs.io/#QmQnSWbsck26xrFRiowdV2JhP7cbKRc9KbjWinRhmJgiMa

或者您可以从 IPFS 网关通过 HTTP 加载它。其中有很多，其中一些列在 IPFS Public Gateway Checker.

中

您可以通过任何网关加载 - 但是请注意，网关可以看到您请求的内容！

使用 IPFS HTTP 网关 URLs 的最好和最安全的方法是获取 v1 CID，它的编码方式与 HTTP URLs 的工作方式相适应。它还确保基于源的安全性（如果它是 HTML URL 并执行代码）。

所以在你的代码中有变量 added，你可以这样做：

let v1CID = added.cid.toV1()

在您的情况下，该值为：

bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu

您现在可以构建一个 URL 到网关，例如：

https://bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu.ipfs.dweb.link

例如，您可以在标签中使用 URL。

查看上面的 public 网关检查器以查看支持此子域 URL 功能的 CloudFlare 网关等其他选项。

Answer 2

function toBase32(value) {
    var cid = new CID(value)
    return cid.toV1().toBaseEncodedString('base32')
  }

这会将给定的 v0 哈希转换为 v1 哈希。然后可以按照上述答案中Dietrich Ayala所述的方式检索图像。

在 React 中使用 Infura API 和 ipfs-http-client 检索存储在 IPFS 上的 JPG 图像

Retrive JPG image stored on IPFS using Infura API and ipfs-http-client in React

node.js

reactjs

blockchain

ipfs

js-ipfs