在 Vue3 中使用 IPFS 分布式存储和共享文件

前言

目前的互联网 HTTP协议 中心化严重，各种问题日益突出，http网络在下载文件和浏览网页时，只能一次从一个数据中心获取信息，当数据中心有问题、出现故障时，就会出现数据信息丢失或者网页无法找回。

最初的 IPFS协议 只是为了解决中心化问题，ipfs基于网络数据分布式储存的网络基础，为了维护ipfs系统的稳定和长久发展，于是出现了filecoin，filecoin作为ipfs项目的奖励机制，filecoin主要是通过贡献分享闲置的硬盘来作为奖励的一种方式，filecion与ipfs相辅相成，独立存在又紧密联系，共同发展。

IPFS是什么？

IPFS官网：https://ipfs.io

InterPlanetary File System（IPFS）星际文件系统 是一个旨在创建持久且分布式存储 和 共享文件的网络传输协议。它是一种内容可寻址的对等超媒体分发协议。在IPFS网络中的节点将构成一个分布式文件系统。它是一个开放源代码项目，自2014年开始由Protocol Labs在开源社区的帮助下发展。其最初由Juan Benet设计。

IPFS 的工作原理

当您将文件添加到 IPFS 时，您的文件会被拆分为更小的块，经过加密哈希处理，并被赋予一个称为内容标识符(CID)的唯一指纹。此 CID 充当您文件的永久记录，因为它在该时间点存在。
当其他节点查找您的文件时，他们会询问他们的对等节点谁存储了文件的 CID 引用的内容。当他们查看或下载您的文件时，他们会缓存一个副本——并成为您内容的另一个提供者，直到他们的缓存被清除。
节点可以固定内容以永久保留（并提供）它，或者丢弃一段时间未使用的内容以节省空间。这意味着网络中的每个节点只存储它感兴趣的内容，以及一些有助于确定哪个节点存储什么的索引信息。
如果您将文件的新版本添加到 IPFS，它的加密哈希是不同的，因此它会获得一个新的 CID。这意味着存储在 IPFS 上的文件可以抵抗篡改和审查——对文件的任何更改都不会覆盖原始文件，并且可以重复使用跨文件的公共块以最小化存储成本。
但是，这并不意味着您需要记住一长串 CID — IPFS 可以使用IPNS分散命名系统找到您文件的最新版本，并且DNSLink可用于将 CID 映射到人类可读的 DNS 名称。

在 Vue3 中使用 IPFS

1. 安装依赖包：在你的项目根目录安装 ipfs-core 包。

代码语言：javascript复制

cnpm install ipfs-core --save

# 如果使用 cnpm 命令安装失败，则使用 npm 命令，耐心等耐一段时间
npm install ipfs-core --save

‍2. 在 main.js 中引入 IPFS

代码语言：javascript复制

import * as IPFS from 'ipfs-core'

3. 将 IPFS 注册为全局属性

代码语言：javascript复制

app.config.globalProperties.$ipfs = IPFS;

4. 使用 IPFS 上传文件

代码语言：javascript复制

// 上传文件
async upload(){
    // 创建 ipfs 流
    let ipfs = await this.$ipfs.create();
    // 构建参数，这里的 file 就是 File 对象，一般是使用 UI 组件的文件上传组件获取到的 File 对象
    let param = {
        content: this.file
    }
    // 上传文件到 IPFS，返回 cid，前面也提到了，这是该文件的唯一标识符
    const cid = await ipfs.add(param);
    // 拼接文件链接
    // IPFS 的文件链接为 https://ipfs.io/ipfs/{CID}
    this.fileUrl = 'https://ipfs.io/ipfs/'   cid.path;
    // 关闭流：如果 ipfs 在线，则调用 stop() 方法停止，否则一直进行通信，消耗资源
    if(ipfs.isOnline()) {
        ipfs.stop();
    }
    // 上传完成：此时定义 fileUrl 就是该文件的链接，直接访问即可
}

这是我刚才上传的一张图片，有条件的同学可以科学上网进行访问。