在B站看了黎跃春老师的教学视频，结合网上的资源和自己的操作整理的笔记，知识无价，感谢分享！

1.创建react项目

cd 1127/demo
create-react-app ipfs_img
cd ipfs_img
atom ./
npm start

2.完成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 on Click={() =>{

        var file =this.refs.file.files(0);

        var reader = new FileReader();

        reader.readAsArrayBuffer(file)

        reader.onloadend = (e) =>{

          console.log(reader);

        }

      }}>Submit</button>

      </div>

      {

        this.state.imgSrc

        ? <div>

            <h2>{"[http://localhost:8000/ipfs/](http://localhost:8000/ipfs/)" + this.state.imgSrc}</h2>

            <img alt="区块链部落" style={{

              width:1600

            }} src={"[http://localhost:8000/ipfs/](http://localhost:8000/ipfs/)" +this.state.imgSrc}/>

          </div>

        : <img alt=""/>

      }

    </div>);

  }

}

export default App;

image.png

3.安装“ipfs-api”

npm install --save-dev ipfs-api
或者
npm install --save ipfs-api

卸载指令

npm uninstall --save-dev ipfs-api
npm uninstall --save ipfs-api

npm start

4."App.js"导入IPFS

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

image.png

5.实现上传图片到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);

        })

   })

}

6.上传图片到IPFS

var file =this.refs.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中。

7.完整代码

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 on Click={() => {

        //console.log(this.refs.file.files)

        var file =this.refs.file.files[0];

        var reader = new FileReader();

        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/](http://localhost:8080/ipfs/)" + this.state.imgSrc}</h2>

            <img alt="区块链部落" style={{

              width:1600

            }} src={"[http://localhost:8080/ipfs/](http://localhost:8080/ipfs/)" + this.state.imgSrc}/>

          </div>

        : <img alt=""/>

      }

    </div>);

  }

}

export default App