译文出自:登链翻译计划 [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