![区块链交易所](https://175.178.95.144/qu/d/file/exchange/negocie-coins.png alt="Negocie Coins的Logo">)
区块链交易所
![区块链交易所](https://175.178.95.144/qu/d/file/exchange/ripple-china.png alt="Ripple China的Logo">)
官方|通过Web应用程序将文件上传到IPFS
发布：中币网 时间：2021-10-21 00:00:00 加入收藏 打赏
与IPFS最常见的交互方式之一是从客户端应用程序上传图像和视频等文件，然而令人感到惊讶的是，没有简单的教程展示如何完成此操作。
在本教程中，您将使用ipfs-http-client（https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client#readme）。该想法是在 React 中实现的，但应该很容易转移到 JavaScript 框架中做相同的事情，比如 Vue、Angular 或 Svelte。
关于 IPFS
IPFS 是一种去中心化的点对点文件共享协议。
有各种类型的IPFS 网关（https://docs.ipfs.io/concepts/ipfs-gateway/#overview）可用。有些是免费的，有些则不是。一些网关提供只读访问权限，而另一些网关提供读取和写入访问权限。
您还可以运行自己的 IPFS 网关。
因为我们将上传/保存文件，所以需要选择允许我们写访问代码的网关。这次教程使用的网关是Infura。其他受欢迎的服务是Pinata或Fleek。
入门
如果您已经创建了一个 React 应用程序，则可以跳过此步骤。
首先，创建一个新的 React 应用程序并切换到新目录：
接下来，ipfs-http-client使用NPM或Yarn安装库：
基本代码
基本功能可以仅用3行代码来概括，但本教程还将构建一个完整的 UI 来展示它们是如何组合在一起的。
使其工作的基本代码在这里：
完整代码
现在让我们看看如何使用上面的代码在应用程序中实现文件上传功能，进行上传和查看图像。
在您的项目中，打开src/App.js并使用以下代码更新它：
接下来，运行应用程序：
当应用加载时，您应该会看到一个文件上传按钮。
文件成功上传后，您应该会看到它在 UI 中呈现。
查看更多
来源：
来源：中币网 https://www.zhongbi.net/news/blocknews/280132.html 声明：登载此文仅出于分享区块链知识，并不意味着赞同其观点或证实其描述。文章内容仅供参考，不构成投资建议。投资者据此操作，风险自担。 此文如侵犯到您的合法权益，请联系我们3111859717@qq.com，我们将第一时间处理。
