通过Web应用向IPFS上传文件

区块链技术 1 4 月 22, 2024 0 区块链315

在Web应用中向IPFS上传文件

> * 原文： https://dev.to/dabit3/uploading-files-to-ipfs-from-a-web-application-50a 作者：Nader Dabit > * 译文出自：[登链翻译计划](https://github.com/lbc-team/Pioneer) > * 译者：[翻译小组](https://learnblockchain.cn/people/412) > * 校对：[Tiny 熊](https://learnblockchain.cn/people/15) > * 本文永久链接：[learnblockchain.cn/article…](https://learnblockchain.cn/article/1) 与[IPFS](https://ipfs.io/#how)的交互最常见的方式是从客户端应用程序上传图片和视频等文件，但我发现，好像没有很直接明了的教程。在本教程中，你将通过使用[ipfs-http-client](https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client#readme)，以尽可能少的代码（尽可能简单）来学习。这里的想法是在React中实现的，但应该可以相当容易地转移到任何其他JavaScript框架中，如Vue、Angular或Svelte。 ## 关于IPFS [IPFS](https://learnblockchain.cn/2018/12/25/use-ipfs)是一个去中心化的、点对点的文件共享协议。有各种类型的[IPFS网关](https://docs.ipfs.io/concepts/ipfs-gateway/#overview)可用，有些是免费的，有些则不是。有些提供只读访问，有些则提供读写访问。你也可以运行[你自己的IPFS网关](https://docs.ipfs.io/concepts/ipfs-gateway/#gateway-providers)。因为我们将上传/保存文件，需要选择一个允许我们写访问的网关，这里使用的网关是[Infura](https://infura.io/docs/ipfs)，其他流行的服务网管有[Pinata](https://pinata.cloud/)或[Fleek](https://fleek.co/)。关于如何用Pinata将文件pin在IPFS上的例子，请查看[这个代码库](https://github.com/dabit3/ipfs-pinata-example)。 ## 开始工作 > 如果你已经创建了一个React应用程序，则可以跳过这个步骤。首先，创建一个新的React应用程序，并进入新目录。 ```bash npx create-react-app ipfs-example cd ipfs-example ``` 接下来，使用**NPM**或**Yarn**安装`ipfs-http-client`库。 ``` npm install ipfs-http-client ``` ## 上传基本代码基本功能只需3行代码就能概括，但我也将建立一个完整的用户界面，以显示它是如何组合在一起的。可工作的基本代码： ```js /* 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') ``` ## 完整的代码现在让我们看看运用上述代码在应用程序中实际实现文件上传功能，以及查看图片。在你的项目中，打开**src/App.js**，更新为以下代码： ```javascript /* src/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 ( <div className="App"> <h1>IPFS Example</h1> <input type="file" onChange={onChange} /> { fileUrl && ( <img src={fileUrl} width="600px" /> ) } </div> ); } export default App ``` 接下来，运行该应用程序。 ``` npm start ``` 当应用程序加载时，你应该看到一个文件上传按钮。一旦一个文件被成功上传，你应该看到它在用户界面上呈现出来。你看，超简单的。 --- 本翻译由 [CellETF](https://celletf.io/?utm_souce=learnblockchain) 赞助支持。

原文： https://dev.to/dabit3/uploading-files-to-ipfs-from-a-web-application-50a 作者：Nader Dabit

译文出自：登链翻译计划

译者：翻译小组

校对：Tiny 熊

本文永久链接：learnblockchain.cn/article…

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

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

关于IPFS

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

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

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

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

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

开始工作

如果你已经创建了一个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')

完整的代码

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

在你的项目中，打开src/App.js，更新为以下代码：

/* src/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 (
    &lt;div className="App">
      &lt;h1>IPFS Example&lt;/h1>
      &lt;input
        type="file"
        onChange={onChange}
      />
      {
        fileUrl && (
          &lt;img src={fileUrl} width="600px" />
        )
      }
    &lt;/div>
  );
}

export default App

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