目錄

• 1. 項目效果圖
• 2. 創建React項目
• 3. 完成UI邏輯
• 4. 安裝ipfs-api
• 5. App.js導入IPFS
• 6. 實現上傳圖片到IPFS的Promise函數
• 7. 上傳圖片到IPFS
• 8. 完整代碼
• 9. 運行項目
• 10. 總結
• 11. 技術交流

系列文章

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

1. 項目效果圖

選擇圖片，點擊Submit將圖片提交到IPFS，并且返回IPFS的HASH值，再通過HASH從IPFS讀取圖片。

2. 創建React項目

具體不知道怎么操作的，請移步到【IPFS + 區塊鏈 系列】 入門篇 - IPFS + Ethereum （上篇）-js-ipfs-api。

$ 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 (<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 onClick={() => {var file = this.refs.file.files[0];var reader = new FileReader();// reader.readAsDataURL(file);reader.readAsArrayBuffer(file)reader.onloadend = (e) => {console.log(reader);// 上傳數據到IPFS}}}>Submit</button></div>{this.state.imgSrc? <div><h2>{"http://localhost:8080/ipfs/" + this.state.imgSrc}</h2><img alt="區塊鏈部落" style= src={"http://localhost:8080/ipfs/" + this.state.imgSrc}/></div>: <img alt=""/>}</div>);} }export default App

4. 安裝ipfs-api

localhost:1126 yuechunli$ cd ipfs_img/ localhost:ipfs_img yuechunli$ ls README.md package.json src node_modules public yarn.lock localhost:ipfs_img yuechunli$ npm install --save-dev 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 (<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 onClick={() => {var file = this.refs.file.files[0];var reader = new FileReader();// reader.readAsDataURL(file);reader.readAsArrayBuffer(file)reader.onloadend = (e) => {console.log(reader);// 上傳數據到IPFSsaveImageOnIpfs(reader).then((hash) => {console.log(hash);this.setState({imgSrc: hash})});}}}>Submit</button></div>{this.state.imgSrc? <div><h2>{"http://localhost:8080/ipfs/" + this.state.imgSrc}</h2><img alt="區塊鏈部落" style= src={"http://localhost:8080/ipfs/" + this.state.imgSrc}/></div>: <img alt=""/>}</div>);} }export default App

9. 運行項目

• npm start
• 新建終端，啟動節點服務ipfs daemon

10. 總結

這本文章主要復習如何創建React項目，如何安裝ipfs-api，如何編寫上傳圖片到IPFS的Promise函數，下一篇我們將介紹，如何將圖片hash存儲到區塊鏈，如何從區塊鏈取到hash，并且通過hash從ipfs拿到圖片。

http://liyuechun.org/2017/11/25/ipfs-upload-image/

總結

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

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