如何使用 React 在 IPFS infura.io 上上传文件的封面图片

实现使用React往IPFS infura.io 上上传文件的封面图片需要三步进行:

  • 创建并设置我们的 infura 帐户
  • 往IPFS 上上传文件
  • 从IPFS 访问内容。

设置 infura 帐户。

转到官方网站infura.io并创建一个新帐户,如果您在创建并签名后没有显示它,请单击创建新密钥

选择网络 IPFS 并根据需要提及项目名称并创建它。

在您将在此处看到以下凭据项目秘密密钥、API 密钥秘密和 IPFS 端点之后,我们在这里还需要一件事是专用网关域链接,因此我们将通过启用专用网关选项来获取它,输入您自己选择的域名称,然后保存域。

现在您已经设置了您的帐户,现在您有了自己的专用网关,我们稍后将在我们的项目中使用所有这些凭证。

如何在您的项目中将文件上传到 IPFS。

在您的 React 项目中,我们需要名为 ipfs-http-client 的 npm 包,使用此命令安装它。

npm i ipfs-http-client

在你的 React 项目中打开 App.js 文件并导入我们正在导入的 ipfs-http-clientcreate函数,ipfsHttpClientipfs-http-client在你的 React 项目中设置你的 infura 凭证。

import { create as ipfsHttpClient } from "ipfs-http-client";

在您的 App.js 组件中添加您的 infura 密钥,我们将使用它们通过使用base64函数生成密钥来生成授权密钥btoa

const projectId = "<YOUR PROJECT ID>";
const projectSecret = "<YOUR PROJECT SECRET>";
const authorization = "Basic " + btoa(projectId + ":" + projectSecret);

注意:使用随机变量以获得更安全的选择

现在我们将创建一个变量,ipfs它将存储函数返回的 ipfs http 客户端create。我们将在create函数 includeurlheadersinclude中传递参数authorization

   const ipfs = create({
      url: "https://ipfs.infura.io:5001/api/v0",
      headers:{
        authorization
      }
    })

与IPFS建立连接后,我们将从输入表单上传文件。

  <div className="App">
      {ipfs && (
        <>
          <h3>Upload file to IPFS</h3>
          <form onSubmit={onSubmitHandler}>
            <input type="file" name="file"/>
            <button type="submit">Upload file</button>
          </form>
        </>
      )}
    </div>

onSubmitHandler是负责所有实现的主要功能,让我们编写代码。

const onSubmitHandler = async (event) => {
    event.preventDefault();
    const form = event.target;
    const files = (form[0]).files;

    if (!files || files.length === 0) {
      return alert("No files selected");
    }

    const file = files[0];
    // upload files
    const result = await ipfs.add(file);

    setImages([
      ...images,
      {
        cid: result.cid,
        path: result.path,
      },
    ]);

    form.reset();
  };

上述功能的逻辑很简单

  1. 如果选中则验证文件,否则显示警报消息文件未被选中

  2. ipfs.add(file)正在上传文件到 IPFS

  3. add方法返回以下属性,包括cidpath,最重要的属性是(它是内容标识符或赋予上传文件的唯一内容标识符)和(我们将使用它来显示文件)sizemtimecidpath

  4. 我们将通过添加新文件来更新图像的状态

在组件的开头添加此行。

const [images, setImages] = useState([])

显示从 IPFS 上传的文件

我们已经在 onSubmitHandler 函数中实现了我们的逻辑,现在我们将在我们的 jsx 中使用这个逻辑让我们添加
模板来显示文件,在最后复制来自 Infura API 密钥的专用网关域链接并替换中还有一件事要做它与dedicated-gateway-link.

<div>
        {images.map((image, index) => (
          <img
          alt={`Uploaded #${index + 1}`}
          src={"<dedicated-gateway-link>/ipfs/" + image.path}
            style={{ maxWidth: "400px", margin: "15px" }}
            key={image.cid.toString() + index}
          />
        ))}
      </div>

最后

您已经学习了如何设置 infura 项目上传文件并在 React 应用程序中访问它,这样 一个简单得案例就完成了!

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值