狼爱上狸

我胡汉三又回来了

IPFS + Ethereum(下篇):IPFS + Ethereum存储和获取图片

1. 项目描述

这篇文章通过truffle unbox react创建项目,安装ipfs-api,将图片存储到ipfs,将图片hash存储到Ethereum区块链,取数据时先从区块链读取图片hash,再通过hashipfs读取数据,解决了区块链大数据存储成本高昂的问题。

2. 效果图

3. 阅读本文需要掌握的知识

阅读本文需要将先学习上面的系列文章,由于本文前端使用了大量的React语法,所以建议学习一些React语法,还需要学习truffle framework

4. 源码

其实这篇文章的内容就是上面几篇文章的综合结合体,所以在这里我将不再对代码做过多的概述。

import React, {Component} from 'react' import SimpleStorageContract from '../build/contracts/SimpleStorage.json' import getWeb3 from './utils/getWeb3'  import './css/oswald.css' import './css/open-sans.css' import './css/pure-min.css' import './App.css'  const ipfsAPI = require('ipfs-api'); const ipfs = ipfsAPI({host: 'localhost', port: '5001', protocol: 'http'});  const contract = require('truffle-contract') const simpleStorage = contract(SimpleStorageContract) let account;  // Declaring this for later so we can chain functions on SimpleStorage. let contractInstance;  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 = {       blockChainHash: null,       web3: null,       address: null,       imgHash: null,       isWriteSuccess: false     }   }    componentWillMount() {      ipfs.swarm.peers(function(err, res) {       if (err) {         console.error(err);       } else {         // var numPeers = res.Peers === null ? 0 : res.Peers.length;         // console.log("IPFS - connected to " + numPeers + " peers");         console.log(res);       }     });      getWeb3.then(results => {       this.setState({web3: results.web3})        // Instantiate contract once web3 provided.       this.instantiateContract()     }).catch(() => {       console.log('Error finding web3.')     })   }    instantiateContract = () => {      simpleStorage.setProvider(this.state.web3.currentProvider);     this.state.web3.eth.getAccounts((error, accounts) => {       account = accounts[0];       simpleStorage.at('0x345ca3e014aaf5dca488057592ee47305d9b3e10').then((contract) => {         console.log(contract.address);         contractInstance = contract;         this.setState({address: contractInstance.address});         return;       });     })    }   render() {     return (<div className="App">       {         this.state.address           ? <h1>合约地址:{this.state.address}</h1>           : <div/>       }       <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 = function(e) {               console.log(reader);               saveImageOnIpfs(reader).then((hash) => {                 console.log(hash);                 this.setState({imgHash: hash})               });              }.bind(this);            }}>将图片上传到IPFS并返回图片HASH</button>       </div>       {         this.state.imgHash           ? <div>               <h2>imgHash:{this.state.imgHash}</h2>               <button onClick={() => {                   contractInstance.set(this.state.imgHash, {from: account}).then(() => {                     console.log('图片的hash已经写入到区块链!');                     this.setState({isWriteSuccess: true});                   })                 }}>将图片hash写到区块链:contractInstance.set(imgHash)</button>             </div>           : <div/>       }       {         this.state.isWriteSuccess           ? <div>               <h1>图片的hash已经写入到区块链!</h1>               <button onClick={() => {                   contractInstance.get({from: account}).then((data) => {                     console.log(data);                     this.setState({blockChainHash: data});                   })                 }}>从区块链读取图片hash:contractInstance.get()</button>             </div>           : <div/>       }       {         this.state.blockChainHash           ? <div>               <h3>从区块链读取到的hash值:{this.state.blockChainHash}</h3>             </div>           : <div/>       }       {         this.state.blockChainHash           ? <div>               <h2>浏览器访问:{"http://localhost:8080/ipfs/" + this.state.imgHash}</h2>               <img alt="" style={{                   width: 1600                 }} src={"http://localhost:8080/ipfs/" + this.state.imgHash}/>             </div>           : <img alt=""/>       }     </div>);   } }  export default App 

5. 源码修改

可以自己建立项目,也可以直接下载原博主的源码并进行修改。这里直接下载原博主的代码进行修改。

5.1 下载源码,安装依赖

$ git clone https://github.com/liyuechun/IPFS-Ethereum-Image.git $ cd IPFS-Ethereum-Image $ npm install 

5.2 查看源码端口

/Users/yuyang/IPFS-Ethereum-Image/src/utils/getWeb3.js

var provider = new Web3.providers.HttpProvider('http://127.0.0.1:9545') 

使用的端口是9545truffle develop 默认使用的端口就是9545,所以我们使用truffle develop作为测试私链。

5.3 启动私链

yuyangdeMacBook-Pro:IPFS-Ethereum-Image yuyang$ truffle develop Truffle Develop started at http://127.0.0.1:9545/  Accounts: (0) 0x627306090abab3a6e1400e9345bc60c78a8bef57 (1) 0xf17f52151ebef6c7334fad080c5704d77216b732 (2) 0xc5fdf4076b8f3a5357c5e395ab970b5b54098fef (3) 0x821aea9a577a9b44299b9c15c88cf3087f3b5544 (4) 0x0d1d4e623d10f9fba5db95830f7d3839406c6af2 (5) 0x2932b7a2355d6fecc4b5c0b6bd44cc31df247a2e (6) 0x2191ef87e392377ec08e7c08eb105ef5448eced5 (7) 0x0f4f2ac550a1b4e2280d04c21cea7ebd822934b5 (8) 0x6330a553fc93768f612722bb8c2ec78ac90b3bbc (9) 0x5aeda56215b167893e80b4fe645ba6d5bab767de  Private Keys: (0) c87509a1c067bbde78beb793e6fa76530b6382a4c0241e5e4a9ec0a0f44dc0d3 (1) ae6ae8e5ccbfb04590405997ee2d52d2b330726137b875053c36d94e974d162f (2) 0dbbe8e4ae425a6d2687f1a7e3ba17bc98c673636790f1b8ad91193c05875ef1 (3) c88b703fb08cbea894b6aeff5a544fb92e78a18e19814cd85da83b71f772aa6c (4) 388c684f0ba1ef5017716adb5d21a053ea8e90277d0868337519f97bede61418 (5) 659cbb0e2411a44db63778987b1e22153c086a95eb6b18bdf89de078917abc63 (6) 82d052c865f5763aad42add438569276c00d3d88a2d062d36b2bae914d58b8c8 (7) aa3680d5d48a8283413f7a108367c7299ca73f553735860a87b08f39395618b7 (8) 0f62d96d6675f32685bbdb8ac13cda7c23436f63efbb9d07700d8669ff12b7c4 (9) 8d5366123cb560bb606379f90a0bfd4769eecc0557f1b362dcae9012b548b1e5  Mnemonic: candy maple cake sugar pudding cream honey rich smooth crumble sweet treat  ⚠️  Important ⚠️  : This mnemonic was created for you by Truffle. It is not secure. Ensure you do not use it on production blockchains, or else you risk losing funds. 

5.4 编译和部署合约

truffle(develop)> compile truffle(develop)> migrate 

5.5 获取合约地址

Using network 'develop'.  Running migration: 1_initial_migration.js   Deploying Migrations...   ... 0x130a37fb2d60e34cc04fccbfc51c10b988d61378090b89eb4546cce2a6ef3490   Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0 Saving successful migration to network...   ... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956 Saving artifacts... Running migration: 2_deploy_contracts.js   Deploying SimpleStorage...   ... 0x8c51da613e7c0517e726926c18d535aed0d21c8f4c82668212a6cdfd193d21d8   SimpleStorage: 0x345ca3e014aaf5dca488057592ee47305d9b3e10 Saving successful migration to network...   ... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0 Saving artifacts... 

SimpleStorage合约地址为0x345ca3e014aaf5dca488057592ee47305d9b3e10。也可以从/Users/yuyang/IPFS-Ethereum-Image/build/contracts/SimpleStorage.json看到

"networks": {     "4447": {       "events": {},       "links": {},       "address": "0x345ca3e014aaf5dca488057592ee47305d9b3e10",       "transactionHash": "0x8c51da613e7c0517e726926c18d535aed0d21c8f4c82668212a6cdfd193d21d8"     }   }, 

5.6 修改App.js文件

/Users/yuyang/IPFS-Ethereum-Image/src/App.js

instantiateContract = () => {      simpleStorage.setProvider(this.state.web3.currentProvider);     this.state.web3.eth.getAccounts((error, accounts) => {       account = accounts[0];       simpleStorage.at('0x345ca3e014aaf5dca488057592ee47305d9b3e10').then((contract) => {         console.log(contract.address);         contractInstance = contract;         this.setState({address: contractInstance.address});         return;       });     })   } 

将其中的0x345ca3e014aaf5dca488057592ee47305d9b3e10合约地址替换为你的合约地址。

6. 启动程序

新开命令行启动IPFS节点

yuyangdeMacBook-Pro:~ yuyang$ ipfs daemon 

新开命令行启动程序

yuyangdeMacBook-Pro:~ yuyang$ npm start 

7. 配置MetaMask插件和准备以太坊账号

程序启动后,会自动打开浏览器。注意,因为MetaMask插件只支持Chrome浏览器和FireFox浏览器,所以你需要运行保持页面运行在这两种浏览器上。关于MetaMask插件这部分内容,请查看这篇文章

因为我们的私链是部署在http://127.0.0.1:9545上的,所以你需要让MetaMask插件的端口也指向http://127.0.0.1:9545。点击Custom RPC进行配置后,切换端口为http://127.0.0.1:9545

因为需要向区块写入数据,需要花费gas,如果你的当前Account中没有以太币,可以导入其他的Account。点击右上角头像图标。

点击Import Account

需要输入私钥。在我们输入truffle develop启动私链的时候,已经分配给了我们十个Account地址和对应的私钥,任一账号都有100以太币,随便选择一个私钥填入。

Accounts: (0) 0x627306090abab3a6e1400e9345bc60c78a8bef57 (1) 0xf17f52151ebef6c7334fad080c5704d77216b732 (2) 0xc5fdf4076b8f3a5357c5e395ab970b5b54098fef (3) 0x821aea9a577a9b44299b9c15c88cf3087f3b5544 (4) 0x0d1d4e623d10f9fba5db95830f7d3839406c6af2 (5) 0x2932b7a2355d6fecc4b5c0b6bd44cc31df247a2e (6) 0x2191ef87e392377ec08e7c08eb105ef5448eced5 (7) 0x0f4f2ac550a1b4e2280d04c21cea7ebd822934b5 (8) 0x6330a553fc93768f612722bb8c2ec78ac90b3bbc (9) 0x5aeda56215b167893e80b4fe645ba6d5bab767de  Private Keys: (0) c87509a1c067bbde78beb793e6fa76530b6382a4c0241e5e4a9ec0a0f44dc0d3 (1) ae6ae8e5ccbfb04590405997ee2d52d2b330726137b875053c36d94e974d162f (2) 0dbbe8e4ae425a6d2687f1a7e3ba17bc98c673636790f1b8ad91193c05875ef1 (3) c88b703fb08cbea894b6aeff5a544fb92e78a18e19814cd85da83b71f772aa6c (4) 388c684f0ba1ef5017716adb5d21a053ea8e90277d0868337519f97bede61418 (5) 659cbb0e2411a44db63778987b1e22153c086a95eb6b18bdf89de078917abc63 (6) 82d052c865f5763aad42add438569276c00d3d88a2d062d36b2bae914d58b8c8 (7) aa3680d5d48a8283413f7a108367c7299ca73f553735860a87b08f39395618b7 (8) 0f62d96d6675f32685bbdb8ac13cda7c23436f63efbb9d07700d8669ff12b7c4 (9) 8d5366123cb560bb606379f90a0bfd4769eecc0557f1b362dcae9012b548b1e5 

8. 运行程序

  1. 页面会显示当前合约的地址0x345ca3e014aaf5dca488057592ee47305d9b3e10

  2. 选择一张图片

  3. 点击上传到IPFS,并获取到图片hashQmSLnchQXh9gJrDKvQ5UFLZAj5f7icb2yWsWmcUKUYY3gj

  4. 点击将图片hash值保存到区块链,弹出MetaMask插件进行写入合约的确认

  5. 从区块链获取图片hashQmSLnchQXh9gJrDKvQ5UFLZAj5f7icb2yWsWmcUKUYY3gj

  6. 根据图片hash值,从IPFS进行访问

参考:【IPFS + 区块链 系列】 入门篇 - IPFS + Ethereum (下篇)-ipfs + Ethereum 大图片存储
作者:黎跃春



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

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