检索存储在ipf上的JPG映像，使用Infura API和ipfs-http-client in React

Question

我在ipfs上上传了一个jpg图像，使用的是呋喃API和。该文件是从type=file输入中提取的。事件列表正在发生变化。

// 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.Now，我试图检索图像并将其显示在web应用程序上。，我该如何继续。

Answer 1

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

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

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

或者您可以通过HTTP从IPFS网关加载它。其中有很多，有些是在IPFS公共网关检查器列出的。

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

使用IPFS网关URL的最佳和最安全的方法是获得v1 CID，它是以一种与HTTP如何工作的方式编码的。它还确保了基于源的安全性(如果它是HTML并执行代码)。

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

let v1CID = added.cid.toV1()

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

bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu

您现在可以构造一个网关的URL，如下所示：

https://bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu.ipfs.dweb.link

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

查看上面的公共网关检查器，查看其他选项，比如CloudFlare的网关，它支持这个子域URL功能。

Answer 2

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

这会将给定的v0哈希转换为v1哈希。然后，像迪特里希·阿亚拉在上面的答案中提到的那样，可以检索图像。