学习
实践
活动
工具
TVP
写文章

第十五期 前端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原力区

价值 · 共建 · 共享 · 荣耀

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181106A1KCQL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券