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

【问题标题】：Retrive JPG image stored on IPFS using Infura API and ipfs-http-client in React在 React 中使用 Infura API 和 ipfs-http-client 检索存储在 IPFS 上的 JPG 图像
【发布时间】：2021-03-12 02:14:22
【问题描述】：

我使用 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。现在我正在尝试检索图像并将其显示在网络应用程序上。 我应该如何进一步处理。

【问题讨论】：

标签： node.js reactjs blockchain ipfs js-ipfs

【解决方案1】：

这是一个 v0 CID。您可以在IPFS docs here 中了解有关 CID 和不同版本的更多信息。

您可以使用 CID 检查器查看有关编码信息的更多信息：

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

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

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

使用 IPFS HTTP 网关 URL 的最佳和最安全的方法是获取 v1 CID，该 CID 的编码方式与 HTTP URL 的工作方式兼容。它还确保基于源的安全性（以防它是 HTML URL 并执行代码）。

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

let v1CID = added.cid.toV1()

在您的情况下，该值将是：

bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu

您现在可以构造一个指向网关的 URL，例如：

https://bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu.ipfs.dweb.link

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

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

【讨论】：

let v1CID = added.cid.toV1() 当我这样做时，我得到一个对象作为回报 { codec: "dag-pb" multibaseName: "base32" multihash: Uint8Array(34) [ 18, 32, 36, ... ] 版本：1 Symbol(@ipld/js-cid/CID): true } 我现在应该如何进行

【解决方案2】：

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

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

【讨论】：