zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

2023-06-13 09:11:38 时间

前言

目前的互联网 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 的工作原理

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

在 Vue3 中使用 IPFS

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

cnpm install ipfs-core --save

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

‍2. 在 main.js 中引入 IPFS

import * as IPFS from 'ipfs-core'

3. 将 IPFS 注册为全局属性

app.config.globalProperties.$ipfs = IPFS;

4. 使用 IPFS 上传文件

// 上传文件
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 就是该文件的链接,直接访问即可
}

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

https://ipfs.io/ipfs/QmTh7cULTdCrPQkzKBMXzLuZwjQFXp4c3TAJ6dAxR64PJP IPFS

没错,就是这么简单,你的文件就可以永久的存储在分布式存储网络中,重点是,你不需要服务器不需要 VIP,完全开源且免费

当然,IPFS 不仅仅只有这么一个功能,这只是 IPFS 的冰山一角。上面我们只是调用了 add 方法,它还有 addAll、cat、get、ls 等等众多方法,感兴趣的可以去 GitHub 上查看官方文档哦!

IPFS Core API:https://github.com/ipfs/js-ipfs/tree/master/docs/core-api GitHub

既然都上了 GitHu‍b 了,顺便点个关注吧!主页还有更多精彩好文和源码资源等你发现!

https://github.com/LouisLiu00 GitHub

END

往期推荐

CentOS7(Linux)源码安装JDK

CentOS7(Linux)源码安装Nginx

CentOS7(Linux)源码安装MySQL5.7.30

CentOS7(Linux)源码安装Redis

@一个正经的程序员


点赞,点在看,让更多人看见!