PHP ipfs-api,js-ipfs 结合 React

安装create-react-app

npm install -g create-react-php

react项目创建

create-react-app ipfs-http-demo

启动项目

npm start

输入 127.0.0.1:3000

f64b9a695f37?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

image.png

重启一个cmd 安装ipfs-api

npm install --save-dev ipfs-api

f64b9a695f37?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

image.png

终端输入

ipfs confis Addresses。API

f64b9a695f37?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

image.png

App.js

import React, { Component } from 'react';

import './App.css';

//导入ipfs-API

var ipfsAPI =require('ipfs-api')

//获得ipfs的对象

var ipfs = ipfsAPI({host:'localhost',port:'5001',protocol:'http'})

//把utf8字符转换

function Utf8ArrayTostr(array){

var out,i,len,c;

var char2,char3;

out = "";

len = array.length;

i = 0;

while(i

c = array[i++];

switch (c >> 4) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

case 6:

case 7:

out += String.fromCharCode(c);

break;

case 12:

case 13:

char2 = array[i++];

out += String.fromCharCode(((c & 0x1F) << 6 ) | (char2 & 0x3F));

break;

case 14:

char2 = array[i++];

char3 = array[i++];

out += String.fromCharCode(((c & 0x0F) << 12) |((char2 & 0x3F) << 6) |((char3 & 0x3F) << 0));

break;

default:

break;

}

}

return out;

}

class App extends Component {

//创建构造函数

constructor(props){

super(props);

this.state={

hash:null,

content:null

}

}

//文件上传

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);

})

})

}

render() {

return (

十二

ref="ipfs"

style={{width:200,height:50}}/>

onClick={() =>{

let content = this.refs.ipfs.value;

console.log(content)

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

console.log("内容的hash:"+hash);

this.setState({hash});

})

}}

style={{heigth:50}}>将数据提交到IPFS

{

//判断他是否为空不为空显示

this.state.hash ?

{this.state.hash}

:""

}

{

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

console.log(stream);

let content = Utf8ArrayTostr(stream);

console.log(content);

this.setState({content});

});

}}>从IPFS读取数据

{this.state.content ?

{this.state.content}

: ""

}

);

}

}

export default App;

ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值