目錄

• 1. 系列文章
• 2. 項目描述及效果展示
• 3. 閱讀本文需要掌握的知識
• 4. 源碼
• 5. 運行程序
• 6. 技術交流

1. 系列文章

• 【IPFS + 區塊鏈 系列】 入門篇 - IPFS環境配置
• 【IPFS + 區塊鏈 系列】 入門篇 - IPFS+IPNS+個人博客搭建
• 【IPFS + 區塊鏈 系列】 入門篇 - IPFS + Ethereum （上篇）-js-ipfs-api - 數據上傳到IPFS
• 【IPFS + 區塊鏈 系列】 入門篇 - IPFS + Ethereum （中篇）-js-ipfs-api - 圖片上傳到IPFS以及下載

2. 項目描述及效果展示

這篇文章通過truffle unbox react創建項目，安裝ipfs-api，將圖片存儲到ipfs，將圖片hash存儲到Ethereum區塊鏈，取數據時先從區塊鏈讀取圖片hash，再通過hash從ipfs讀取數據，解決了區塊鏈大數據存儲成本高昂的問題。

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('0x66e9bbfe244799149a9c4eb708a34ea7c9ce67e2').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= src={"http://localhost:8080/ipfs/" + this.state.imgHash}/></div>: <img alt=""/>}</div>);} }export default App

5. 運行程序

• 項目下載

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

• 運行程序

$ ipfs daemon // 終端一 $ npm start // 終端二

http://liyuechun.org/2017/11/26/ipfs-ethereum-image/

總結

以上是生活随笔為你收集整理的【IPFS + 区块链 系列】 入门篇 - IPFS + Ethereum （下篇）-ipfs + Ethereum 大图片存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。