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 (


      
上传图片到IPFS：
      

        Choose file to upload
        
      
      

         {
            var file = this.refs.file.files[0];
            var reader = new FileReader();
            // reader.readAsDataURL(file);
            reader.readAsArrayBuffer(file)
            reader.onloadend = (e) => {
              console.log(reader);
            }

          }}>Submit
      
      {
        this.state.imgSrc
            

              
{"http://localhost:8080/ipfs/" + this.state.imgSrc}
              
            
          : 
      }
    
);
  }
}

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 (
      


      
上传图片到IPFS：
      

        Choose file to upload
        
      
      

         {
            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
      
      {
        this.state.imgSrc
            ?

              
{"http://localhost:8080/ipfs/" + this.state.imgSrc}
              
            
            :
      }
    
);
  }
}

export default App

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

作者：黎跃春