Node.js 在React中使用infuraAPI和IPFSHTTP客户端检索存储在IPFS上的JPG映像

我使用infuraapi和ipfshttp客户端在ipfs上上传了一个jpg图像。该文件是从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)
  };

//导入
const IpfsHttpClient=require（“ipfs http客户端”）；
const ipfsC=IpfsHttpClient({
主持人：“ipfs.infura.io”，
端口：“5001”，
协议：“https”，
});
{上传（e）；}}/>
常量上传=异步（e）=>{
const file=e.target.files[0]；
const added=wait ipfsC.add（文件{
进度：（prog）=>console.log（`received:${prog}`），
});
console.log（已添加）
};

---

我得到的哈希值是QmQnSWbsck26xrFRiowdV2JhP7cbKRc9KbjWinRhmJgiMa。现在我正在尝试检索图像并将其显示在web应用程序上我应该如何继续

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

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

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

或者您可以通过HTTP从IPFS网关加载它。其中有很多，有些列在这里的网站上

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

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

因此，在添加了变量

的代码中，可以执行以下操作：

让v1CID=added.cid.toV1（）

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

bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu

现在，您可以构建到网关的URL，如：

https://bafybeibekkxkexvbw65ma4syafzfnxtumfx7wjkbtaf2zfsoypmshn6ccu.ipfs.dweb.link

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

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

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

这会将给定的v0哈希转换为v1哈希。然后可以像上面的回答中提到的那样检索图像。
让v1CID=added.cid.toV1（）当我这样做时，我得到一个返回对象{codec:“dag pb”​ multibaseName:“base32”​ 多散列：Uint8Array（34）[18,32,36，…]​ 版本:1​ Symbol（@ipld/js cid/cid）：true}我现在应该如何继续