第十五期 前端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 (

ref="ipfsContent"

style=/>

{

letipfsContent = this.refs.ipfsContent.value;

console.log(ipfsContent);

}}>

提交到

IPFS

{

console.log('

从

ipfs

读取数据。

')

}}>

读取数据

);

}

}

export default App;

以上代码实现的功能是，当在输入框中输入文本时，再点击提交到IPFS按钮，将文本框中的内容取出来打印，后续需要将这个数据上传到IPFS。点击读取数据按钮，控制台打印出字符串，后面需要从IPFS读取数据，然后将读取的数据存储到状态机变量strContent中并展示出来。

导入

IPFS

const ipfsAPI = require('ipfs-api');

const ipfs = ipfs = ipfsAPI();

编写上传大文本字符串到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();

});

ipfsContent是从文本框中取到的数据，调用this.saveTextBlobOnIpfs方法将数据上传后，会返回字符串hash，并且将hash存储到状态机变量strHash中。

用正确的端口运行daemon

$ ipfs daemon

从IPFS读取数据

最终完整的App.js代码如下：

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

const ipfsAPI = require('ipfs-api');

const ipfs = ipfsAPI();

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 (

ref="ipfsContent"

style={}/>

{

let ipfsContent= this.refs.ipfsContent.value;

console.log(ipfsContent);

this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {

console.log(hash);

this.setState();

});

}}>

提交到

IPFS

{

console.log('

从

ipfs

读取数据

')

ipfs.cat(this.state.strHash).then((stream) => {

console.log(stream);

letstrContent = Utf8ArrayToStr(stream);

console.log(strContent);

this.setState();

});

}}>

读取数据

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原力区

价值 · 共建 · 共享 · 荣耀