EOS [EOS DAPP 开发进阶] 03 - 使用 IPFS-API 让微文 DAPP 支持发图片

pendingauth · 2019年09月09日 · 14 次阅读

本文转载自币乎,作者松果,原文链接: https://bihu.com/article/1445448515

这篇文章介绍如何让微文DAPP支持发图片,这些静态数据会使用ipfs-api保存到IPFS网络。

安装ipfs-api

在项目目录,使用如下命令安装ipfs-api

cd weiwen-dapp2/frontend
npm install ipfs-api --save

安装好后,package.json的dependencies如下:

除去React自带的react、react-dom、react-scripts外,已安装17个第三方模块。

使用ipfs-api

在src/api目录下新建一个ipfsApi.js文件,部分代码如下(完整代码):

这里使用Infura提供的IPFS节点来上传文件;

使用IPFS官方的HTTP网关(https://ipfs.io/ipfs)来读取文件。

在src/components/Header.js编写IPFS相关前端代码,使用antd提供的组件来上传文件,代码如下:

效果如下:

点击“上传”按钮,选择本地图片,在handleUpload函数中进行处理,上传文件到Infura的IPFS节点,并返回文件哈希值:

效果如下:

点击“提交”按钮,弹出Scatter确认框,调用weiwendapps2::post Action:

QmV63k7LxAeJ8ckfmjVhMe8iUJuJaDfr7Eo3iC1v1mmaKK就是图片的IPFS哈希值。

在src/components/Posts.js中,使用文件哈希值来获取图片,用展示出来:

效果如下:

点击图片,弹出文件的IPFS地址:

注意,上传到Infura节点的文件没有进行固定(PIN),一段时间后(一般两周)会被IPFS的垃圾回收机制回收;

为了让已上传的文件不被回收,需要使用PIN服务,后续再进行介绍。

Tips

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp2

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册