以太坊实战篇-Vue上传文件到IPFS
IPFS
是InterPlanetary File System
的简称,中文是星际文件系统。
它和百度网盘在使用上区别不大,最大的区别是百度网盘的资源都掌控在百度这一家企业手中,而IPFS
中的资源则是掌握在无数个IPFS
节点中,没有任何人可以说,“嗨,这个文件不能上传,即使上传了不能下载!”。
- 初始化项目
首先拷贝一个初始化好的空白Vue
项目到本地,这个项目是我们的基础项目dapp-basic
,拷贝时直接将其命名为ipfs
$ git clone https://gitee.com/ibmeye/dapp-basic ipfs
运行下面的命令安装依赖包并启动项目
$ yarn
$ yarn run serve
启动后可以看到如下界面
- 在项目根下运行下面的命令,添加
ipfs
依赖
$ yarn add ipfs-http-client
- 打开
src/components/MainContent.vue
文件,添加图片标签、按钮标签及其处理函数。
修改前的代码(只包含部分代码,详见附录中的源码下载地址):
<template>
<el-container>
<el-container>
<el-header>
<span class="bilibili-text">DApp开发</span>
<span class="tarot-text">基础模板</span>
<span class="account-text">登录账户</span>
</el-header>
<el-main>
<div class="img-wrapper">
<el-image class="img-panel" :src="src"></el-image>
<el-button class="img-btn">上传图片</el-button