Web应用上传文件至IPFS

与IPFS最常见的交互方式之一是从客户端应用程序上传图像和视频等文件。然而令人感到惊讶的是，没有简单的教程展示如何完成此操作。

在本教程中，您将使用ipfs-http-client库来实现这个功能。这个教程是在React中实现的，但应该很容易转移到其他JavaScript框架中，比如Vue、Angular或Svelte。

关于IPFS：IPFS是一种去中心化的点对点文件共享协议。有各种类型的IPFS网关可用。有些是免费的，有些则不是。一些网关提供只读访问权限，而另一些网关提供读取和写入访问权限。您还可以运行自己的IPFS网关。因为我们将上传/保存文件，所以需要选择允许我们写入访问的网关。本教程使用的网关是Infura。其他受欢迎的服务是Pinata或Fleek。

入门：如果您已经创建了一个React应用程序，则可以跳过此步骤。

首先，创建一个新的React应用程序并切换到新目录。接下来，使用NPM或Yarn安装ipfs-http-client库。

基本代码：基本功能可以用仅3行代码来概括，但本教程还将构建一个完整的UI来展示它们是如何组合在一起的。下面是使其工作的基本代码：

``` const IPFS = require('ipfs-http-client'); const ipfs = IPFS.create();

async function uploadFile() { const added = await ipfs.add(file); const fileHash = added.cid.toString(); console.log(fileHash); } ```

完整代码：现在让我们看看如何使用上面的代码在应用程序中实现文件上传功能，并实现查看图像的功能。

在您的项目中，打开src/App.js文件并使用以下代码更新它：

``` import React, { useState } from 'react'; import IPFS from 'ipfs-http-client';

function App() { const [file, setFile] = useState(null); const [fileUrl, setFileUrl] = useState('');

const ipfs = IPFS.create();

const onChange = (event) => { setFile(event.target.files[0]); };

const onClick = async () => { const added = await ipfs.add(file); const fileHash = added.cid.toString(); const url = `https://ipfs.io/ipfs/${fileHash}`; setFileUrl(url); };

return (

上传文件 {fileUrl && (

查看文件

)}

); }

export default App; ```

接下来，运行应用程序。当应用加载时，您应该会看到一个文件上传按钮。文件成功上传后，您应该会看到它在UI中呈现。

来源：算力中国