4.通过ipfs-api上传文件到ipfs

最新推荐文章于 2024-12-09 22:05:51 发布

原创最新推荐文章于 2024-12-09 22:05:51 发布 · 8.4k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#通过ipfs-api上传文件到ipfs #通过ipfs-api上传文件 #ipfs-api使用 #ipfs-api #ipfs上传文件

区块链技术同时被 3 个专栏收录

21 篇文章

订阅专栏

区块链技术实战

21 篇文章

订阅专栏

区块链项目实战

17 篇文章

订阅专栏

本文详细介绍了如何在Web前端使用create-react-app和ipfs-api组件，通过npm安装、配置端口、注册ipfs、处理CORS、编写函数，实现文件上传到IPFS并从IPFS获取数据的过程。

本节主要讨论如何基于Web前端调用ipfs-api上传文件到ipfs，通过npm start 启动项目

1. 安装create-react-app

通过npm install 安装 create-react-app，便于后续创建项目

npm install -g create create-react-app

2. 创建项目

通过 create-react-app myipfs 来创建项目

3. 查看目录结构

通过atom打开项目

4. 启动服务器

通过 npm start 启动服务器，出现下面的界面代表服务器启动成功

5.查看页面

服务器启动成功后，会自动弹出以下界面

6. 安装 ipfs-api组件

7. 设置端口

# Show the ipfs config API port to check it is correct
> ipfs config Addresses.API
/ip4/127.0.0.1/tcp/5001
# Set it if it does not match the above output
> ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001
# Restart the daemon after changing the config

# Run the daemon
> ipfs daemon

8.在App.js中注册ipfs

在github中搜索 ipfs js 可以找到相应的信息，注意选择最后一个“ipfs/js-ipfs-api”

从中可以找到以下内容完成ipfs-api的注册，注意这里选择第一个和最后一个即可

9. CORS配置

ipfs需要进行跨域配置，否则会出现以下错误

10. 在App.js中增加函数

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

class App extends Component {
constructor(props){
super(props);
this.state={
hash:null,
content:null
}
}

saveTextOnIpfs=(blob)=>{

return new Promise(function(reslove,reject){

const docBuffer=Buffer.from(blob,'utf-8');
ipfs.add(docBuffer).then((response)=>{

console.log(response);
reslove(response[0].hash)
}).catch((err)=>{
console.error(err);
reject(err);
})

})
}

11. 在App.js中增加按钮和输入框及事件触发

<input
ref="ipfscontent"
style={{width:200,height:50}}/>
<button
onClick={()=>{
console.log("I am submiting...");
let content = this.refs.ipfscontent.value;
console.log(content);

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

console.log("hash"+hash);

this.setState({hash:hash});

})
}}
style={{height:50}}>Submit To Ipfs</button>

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

console.log(stream);
var content=stream;
this.setState({content});
});

}}
>Get From IPFS</button>
{
this.state.hash ? <h1>{this.state.hash}</h1>:""
}
{
this.state.content ? <h1>{this.state.content}</h1> : ""
}