IPFS 和区块链(四) -IPFS图片上传与下载

在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 (


     
上传图片到IPFS:

     


       Choose file to upload

       

    

    


      {

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

        var reader = new FileReader();

        reader.readAsArrayBuffer(file)

        reader.onloadend = (e) =>{

          console.log(reader);

        }

      }}>Submit

      

      {

        this.state.imgSrc

        ? 


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

            

          

        : 

      }

    
);

  }

}

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 (


     
上传图片到IPFS:

     


       Choose file to upload

       

    

    


       {

        //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

      

      {

        this.state.imgSrc

         ? 


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

            

          

        : 

      }

    
);

  }

}

export default App