【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载

【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载

 
  本期技术周报,我们来从前端的角度学习ipfs文件的上传与下载需要使用的指令及操作过程。

React 简介及安装
React是由Facebook和Instagram来开发的一种用来创建用户界面的JavaScript库。
首先你要保证电脑上已经安装了Node.js的最近版本
npm install -g create-react-app
React-dom,react-scripts等react依赖包
React 项目创建
$ create-react-app ipfs-demo
创建一个ipfs-demo的文件夹(这个文件夹就是项目的文件夹)
 npm start Starts thedevelopment server. npm run build Bundles the appinto static files for production. cd ipfs-demo npm start
在项目根目录输入npm start命令,查看项目在浏览器的显示效果:
安装js-ipfs-api
npm install --save ipfs-api
(-s生产环境  -D开发环境)
1
安装成功会在项目node_modules目录下多出ipfs-api文件夹,在package.json
下增加依赖包信息:
import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state= { strHash:null, strContent: null } } render() { return ( <input< span=""> ref="ipfsContent" style=/> { letipfsContent = this.refs.ipfsContent.value; console.log(ipfsContent); }}> 提交到 IPFS {this.state.strHash} { console.log(' 从 ipfs 读取数据。 ') }}> 读取数据 {this.state.strContent} ); } } export default App;
以上代码实现的功能是,当在输入框中输入文本时,再点击提交到IPFS按钮,
将文本框中的内容取出来打印,后续需要将这个数据上传到IPFS。点击读取
数据按钮,控制台打印出字符串,后面需要从IPFS读取数据,然后将读取的
数据存储到状态机变量strContent中并展示出来。
导入 IPFS
const ipfsAPI = require('ipfs-api'); const ipfs = ipfs = ipfsAPI({host: 'localhost', port:'5001', protocol: 'http'});
编写上传大文本字符串到IPFS的Promise函数
(获取文件的哈希)
saveTextBlobOnIpfs =(blob) => { return new Promise(function(resolve,reject) { const descBuffer = Buffer.from(blob,'utf-8'); ipfs.add(descBuffer).then((response)=> { console.log(response) resolve(response[0].hash); }).catch((err) => { console.error(err) reject(err); }) }) }
response[0].hash返回的是数据上传到IPFS后返回的HASH字符串。 

上传数据到IPFS
(将文件上传到ipfs)
this.saveTextBlobOnIpfs(ipfsContent).then((hash) => { console.log(hash); this.setState({strHash: hash}); });
ipfsContent是从文本框中取到的数据,调用this.saveTextBlobOnIpfs方法
将数据上传后,会返回字符串hash,并且将hash存储到状态机变量strHash中。
用正确的端口运行daemon
$ ipfs daemon
从IPFS读取数据
  ipfs.cat(this.state.strHash).then((stream) => { console.log(stream); let strContent =Utf8ArrayToStr(stream); console.log(strContent); this.setState({strContent: strContent}); });
最终完整的App.js代码如下:
  import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; const ipfsAPI = require('ipfs-api'); const ipfs = ipfsAPI({host:'localhost', port:'5001',protocal:'http'}); class App extends Component { constructor(props){ super(props); this.state = { strHash: null, strContent:null } } saveTextBlobOnIpfs= (blob) => { return new Promise(function(resolve,reject) { constdescBuffer = Buffer.from(blob, 'utf-8'); ipfs.add(descBuffer).then((response) => { console.log(response) resolve(response[0].hash); }).catch((err)=> { console.error(err) reject(err); }) }) } render() { return ( <input< span=""> ref="ipfsContent" style={{width:200,height:30}}/> { let ipfsContent= this.refs.ipfsContent.value; console.log(ipfsContent); this.saveTextBlobOnIpfs(ipfsContent).then((hash) => { console.log(hash); this.setState({strHash: hash}); }); }}> 提交到 IPFS {this.state.strHash}   { console.log(' 从 ipfs 读取数据 ') ipfs.cat(this.state.strHash).then((stream) => { console.log(stream); letstrContent = Utf8ArrayToStr(stream); console.log(strContent); this.setState({strContent: strContent}); }); }}> 读取数据 {this.state.strContent} Welcome to React To getstarted, edit src/App.js and save to reload. ); } } export default App;
以上就是本期技术周报的全部内容,感谢您的观看。  
  IPFS原力区是全球第一大IPFS价值生态社区,总部位于上海,聚集了众多技术大咖和IPFS爱好者;IPFS原力区秉持:价值,共建,共赢,荣耀的文化理念;提供全面、精细、优质的IPFS咨询和技术支持,将生态中的爱好者转化为IPFS支持者和参与者。 未来,IPFS原力区做好价值文化基因传播、紧盯人工智能,量子计算,大数据等前沿科技,把IPFS区块链技术随时架设在最新的技术基础之上,推动IPFS生态的健康发展。
 

 IPFS官网:http://ipfsforce.com

 IPFSER社区: http://ipfser.org

 微博:http://weibo.com/ipfsforce

IPFS原力区

价值 · 共建 · 共享 · 荣耀

 

长按二维码识别关注我们

ipfs原创,作者:IPFSforce,转载请注明出处:http://ipfser.org/2018/11/06/%e3%80%90ipfs%e5%8e%9f%e5%8a%9b%e5%8c%ba%e6%8a%80%e6%9c%af%e5%91%a8%e6%8a%a5%e3%80%91%e7%ac%ac%e5%8d%81%e4%ba%94%e6%9c%9f-%e5%89%8d%e7%ab%afipfs%e7%9a%84%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8e/

0

扫一扫,分享到微信

猜你喜欢

文章评论

电子邮件地址不会被公开。 必填项已用*标注

获取验证码
后发表评论

微信公众号

知识星球