前端ipfs的文件上传与下载

2018/11/6 10:39:55

React 简介及安装

React是由FacebookInstagram来开发的一种用来创建用户界面的JavaScript库。首先你要保证电脑上已经安装了Node.js的最近版本npm install -g create-react-appReact-domreact-scriptsreact依赖包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-apinpm 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中并展示出来。导入 IPFSconst ipfsAPI = require('ipfs-api'); const ipfs = ipfs = ipfsAPI({host: 'localhost', port:'5001', protocol: 'http'});编写上传大文本字符串到IPFSPromise函数(获取文件的哈希)

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(将文件上传到ipfsthis.saveTextBlobOnIpfs(ipfsContent).then((hash) =>{console.log(hash); this.setState({strHash: hash}); });ipfsContent是从文本框中取到的数据,调用this.saveTextBlobOnIpfs方法将数据上传后,会返回字符串hash,并且将hash存储到状态机变strHash中。用正确的端口运行daemon$ ipfs daemonIPFS读取数据  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;以上就是本期技术周报的全部内容,感谢您的观看。