目录
- 1. 项目效果图
- 2. 创建React项目
- 3. 完成UI逻辑
- 4. 安装ipfs-api
- 5. App.js导入IPFS
- 6. 实现上传图片到IPFS的Promise函数
- 7. 上传图片到IPFS
- 8. 完整代码
- 9. 运行项目
- 10. 总结
- 11. 技术交流
系列文章
- 【IPFS + 区块链 系列】 入门篇 - IPFS环境配置
- 【IPFS + 区块链 系列】 入门篇 - IPFS+IPNS+个人博客搭建
- 【IPFS + 区块链 系列】 入门篇 - IPFS + Ethereum （上篇）-js-ipfs-api - 数据上传到IPFS
1. 项目效果图
选择图片，点击Submit将图片提交到IPFS，并且返回IPFS的HASH值，再通过HASH从IPFS读取图片。
2. 创建React项目
具体不知道怎么操作的，请移步到【IPFS + 区块链 系列】 入门篇 - IPFS + Ethereum （上篇）-js-ipfs-api。
$ create-react-app ipfs_img
3. 完成UI逻辑
将下面的代码拷贝替换掉App.js里面的代码。
import React, {Component} from 'react'
class App extends Component {
constructor(props) {
super(props)
this.state = {
imgSrc: null
}
}
render() {
return (<div className="App">
<h2>上传图片到IPFS：</h2>
<div>
<label id="file">Choose file to upload</label>
<input type="file" ref="file" id="file" name="file" multiple="multiple"/>
</div>
<div>
<button onClick={() => {
var file = this.refs.file.files[0];
var reader = new FileReader();
// reader.readAsDataURL(file);
reader.readAsArrayBuffer(file)
reader.onloadend = (e) => {
console.log(reader);
// 上传数据到IPFS
}
}}>Submit</button>
</div>
{
this.state.imgSrc
? <div>
<h2>{"http://localhost:8080/ipfs/" + this.state.imgSrc}</h2>
<img alt="区块链部落" style= src={"http://localhost:8080/ipfs/" + this.state.imgSrc}/>
</div>
: <img alt=""/>
}
</div>);
}
}
export default App
4. 安装ipfs-api
localhost:1126 yuechunli$ cd ipfs_img/
localhost:ipfs_img yuechunli$ ls
README.md package.json src
node_modules public yarn.lock
localhost:ipfs_img yuechunli$ npm install --save-dev ipfs-api
5. App.js导入IPFS
const ipfsAPI = require('ipfs-api');
const ipfs = ipfsAPI({host: 'localhost', port: '5001', protocol: 'http'});
6. 实现上传图片到IPFS的Promise函数
let saveImageOnIpfs = (reader) => {
return new Promise(function(resolve, reject) {
const buffer = Buffer.from(reader.result);
ipfs.add(buffer).then((response) => {
console.log(response)
resolve(response[0].hash);
}).catch((err) => {
console.error(err)
reject(err);
})
})
}
7. 上传图片到IPFS
var file = this.refs.file.files[0];
var reader = new FileReader();
// reader.readAsDataURL(file);
reader.readAsArrayBuffer(file)
reader.onloadend = function(e) {
console.log(reader);
saveImageOnIpfs(reader).then((hash) => {
console.log(hash);
this.setState({imgSrc: hash})
});
reader.readAsDataURL(file);上传图片路径。reader.readAsArrayBuffer(file)上传图片内容- 上传图片
saveImageOnIpfs(reader).then((hash) => {
console.log(hash);
this.setState({imgSrc: hash})
});
hash即是上传到IPFS的图片的HASH地址，this.setState({imgSrc: hash})将hash保存到状态机变量imgSrc中。
8. 完整代码
import React, {Component} from 'react'
const ipfsAPI = require('ipfs-api');
const ipfs = ipfsAPI({host: 'localhost', port: '5001', protocol: 'http'});
let saveImageOnIpfs = (reader) => {
return new Promise(function(resolve, reject) {
const buffer = Buffer.from(reader.result);
ipfs.add(buffer).then((response) => {
console.log(response)
resolve(response[0].hash);
}).catch((err) => {
console.error(err)
reject(err);
})
})
}
class App extends Component {
constructor(props) {
super(props)
this.state = {
imgSrc: null
}
}
render() {
return (<div className="App">
<h2>上传图片到IPFS：</h2>
<div>
<label id="file">Choose file to upload</label>
<input type="file" ref="file" id="file" name="file" multiple="multiple"/>
</div>
<div>
<button onClick={() => {
var file = this.refs.file.files[0];
var reader = new FileReader();
// reader.readAsDataURL(file);
reader.readAsArrayBuffer(file)
reader.onloadend = (e) => {
console.log(reader);
// 上传数据到IPFS
saveImageOnIpfs(reader).then((hash) => {
console.log(hash);
this.setState({imgSrc: hash})
});
}
}}>Submit</button>
</div>
{
this.state.imgSrc
? <div>
<h2>{"http://localhost:8080/ipfs/" + this.state.imgSrc}</h2>
<img alt="区块链部落" style= src={"http://localhost:8080/ipfs/" + this.state.imgSrc}/>
</div>
: <img alt=""/>
}
</div>);
}
}
export default App
9. 运行项目
npm start- 新建终端，启动节点服务
ipfs daemon
10. 总结
这本文章主要复习如何创建React项目，如何安装ipfs-api，如何编写上传图片到IPFS的Promise函数，下一篇我们将介绍，如何将图片hash存储到区块链，如何从区块链取到hash，并且通过hash从ipfs拿到图片。
11. 技术交流
- 区块链技术交流QQ群：
348924182 - 进微信群请加微信：
liyc1215 - 「区块链部落」官方公众号
