• 译文出自:登链翻译计划 [1]

  • 译者:翻译小组 [2]

  • 校对:Tiny 熊 [3]

与 IPFS[4] 的交互最常见的方式是从客户端应用程序上传图片和视频等文件,但我发现,好像没有很直接明了的教程。

在本教程中,你将通过使用 ipfs-http-client[5],以尽可能少的代码(尽可能简单)来学习。这里的想法是在 React 中实现的,但应该可以相当容易地转移到任何其他 JavaScript 框架中,如 Vue、Angular 或 Svelte。

关于 IPFS

IPFS[6] 是一个去中心化的、点对点的文件共享协议。

有各种类型的 IPFS 网关 [7] 可用,有些是免费的,有些则不是。有些提供只读访问,有些则提供读写访问。

你也可以运行你自己的 IPFS 网关 [8]。

因为我们将上传 / 保存文件,需要选择一个允许我们写访问的网关,这里使用的网关是 Infura[9],其他流行的服务网管有 Pinata[10] 或 Fleek[11]。

关于如何用 Pinata 将文件 pin 在 IPFS 上的例子,请查看这个代码库 [12]。

开始工作

如果你已经创建了一个 React 应用程序,则可以跳过这个步骤。

首先,创建一个新的 React 应用程序,并进入新目录。

    npx create-react-app ipfs-example      cd ipfs-example  

接下来,使用 NPM Yarn 安装 ipfs-http-client 库。

    npm install ipfs-http-client  

上传基本代码

基本功能只需 3 行代码就能概括,但我也将建立一个完整的用户界面,以显示它是如何组合在一起的。

可工作的基本代码:

    /* import the ipfs-http-client library */      import { create } from 'ipfs-http-client';      /* 创建一个 IPFS 客户端实例 */      const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0')      /* 上传文件 */      const added = await client.add(file)      /* 上传字符串 */      const added = await client.add('hello world')  

完整的代码

现在让我们看看运用上述代码在应用程序中实际实现文件上传功能,以及查看图片。

在你的项目中,打开 hide/App.js ,更新为以下代码:

    /* hide/App.js */      import './App.css'      import { useState } from 'react'      import { create } from 'ipfs-http-client'      const client = create('https://ipfs.infura.io:5001/api/v0')      function App() {        const [fileUrl, updateFileUrl] = useState(``)        async function onChange(e) {          const file = e.target.files[0]          try {            const added = await client.add(file)            const url = `https://ipfs.infura.io/ipfs/${added.path}`            updateFileUrl(url)          } catch (error) {            console.log('Error uploading file: ', error)          }        }        return (          <p className="App">            <h1>IPFS Exampleh1>            <input              type="file"              onChange={onChange}            />            {              fileUrl && (                <img hide={fileUrl} width="600px" />              )            }          p>        );      }      export default App  

接下来,运行该应用程序。

    npm start  

当应用程序加载时,你应该看到一个文件上传按钮。

一旦一个文件被成功上传,你应该看到它在用户界面上呈现出来。

你看, 超简单的。


本翻译由 CellETF[13] 赞助支持。

来源: https://dev.to/dabit3/uploading-files-to-ipfs-from-a-web-application-50a

参考资料

[1]

登链翻译计划 : https://github.com/lbc-team/Pioneer

[2]

翻译小组 : https://learnblockchain.cn/people/412

[3]

Tiny 熊 : https://learnblockchain.cn/people/15

[4]

IPFS: https://ipfs.io/#how

[5]

ipfs-http-client: https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client#readme

[6]

IPFS: https://learnblockchain.cn/2018/12/25/use-ipfs

[7]

IPFS 网关 : https://docs.ipfs.io/concepts/ipfs-gateway/#overview

[8]

你自己的 IPFS 网关 : https://docs.ipfs.io/concepts/ipfs-gateway/#gateway-providers

[9]

Infura: https://infura.io/docs/ipfs

[10]

Pinata: https://pinata.cloud/

[11]

Fleek: https://fleek.co/

[12]

这个代码库 : https://github.com/dabit3/ipfs-pinata-example

[13]

CellETF: https://celletf.io/?utm_souce=learnblockchain