image.png
重启一个cmd 安装ipfs-api
npm install --save-dev ipfs-api
image.png
终端输入
ipfs confis Addresses。API
image.png
App.js
import React, { Component } from 'react';
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 (
<div className="App">
<h1>十二</h1>
<input
ref="ipfs"
style={{width:200,height:50}}/>
<button
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</button>
{
//判断他是否为空不为空显示
this.state.hash ? <h1>{this.state.hash}</h1>:""
}
<button onClick={()=>{
ipfs.cat(this.state.hash).then((stream) =>{
console.log(stream);
let content = Utf8ArrayTostr(stream);
console.log(content);
this.setState({content});
});
}}>从IPFS读取数据</button>
{this.state.content ? <h1>{this.state.content}</h1> : ""
}
</div>
);
}
}
export default App;
ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001