狼爱上狸

我胡汉三又回来了

IPFS + Ethereum(中篇):图片存储到IPFS以及获取

1. 项目效果图

2. 创建React项目

yuyangdeMacBook-Pro:~ yuyang$ 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);             }            }}>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

yuyangdeMacBook-Pro:ipfs_img yuyang$ npm install --save 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);               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="区块链部落" src={"http://localhost:8080/ipfs/" + this.state.imgSrc} />             </div>             :<img alt=""/>       }     </div>);   } }  export default App 

参考:【IPFS + 区块链 系列】 入门篇 - IPFS + Ethereum (中篇)-js-ipfs-api - 图片上传到IPFS以及下载

作者:黎跃春



作者:yuyangray
链接:https://www.jianshu.com/p/db2676952c48
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

posted on 2019-07-07 15:01 狼爱上狸 阅读(142) 评论(0)  编辑  收藏 所属分类: Blockchain