目錄

• 1. 項(xiàng)目效果圖
• 2. 創(chuàng)建React項(xiàng)目
• 3. 完成UI邏輯
• 4. 安裝ipfs-api
• 5. App.js導(dǎo)入IPFS
• 6. 實(shí)現(xiàn)上傳圖片到IPFS的Promise函數(shù)
• 7. 上傳圖片到IPFS
• 8. 完整代碼
• 9. 運(yùn)行項(xiàng)目
• 10. 總結(jié)
• 11. 技術(shù)交流

系列文章

• 【IPFS + 區(qū)塊鏈 系列】 入門(mén)篇 - IPFS環(huán)境配置
• 【IPFS + 區(qū)塊鏈 系列】 入門(mén)篇 - IPFS+IPNS+個(gè)人博客搭建
• 【IPFS + 區(qū)塊鏈 系列】 入門(mén)篇 - IPFS + Ethereum （上篇）-js-ipfs-api - 數(shù)據(jù)上傳到IPFS

1. 項(xiàng)目效果圖

選擇圖片，點(diǎn)擊Submit將圖片提交到IPFS，并且返回IPFS的HASH值，再通過(guò)HASH從IPFS讀取圖片。

2. 創(chuàng)建React項(xiàng)目

具體不知道怎么操作的，請(qǐng)移步到【IPFS + 區(qū)塊鏈 系列】 入門(mén)篇 - 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);// 上傳數(shù)據(jù)到IPFS}}}>Submit</button></div>{this.state.imgSrc? <div><h2>{"http://localhost:8080/ipfs/" + this.state.imgSrc}</h2><img alt="區(qū)塊鏈部落" 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導(dǎo)入IPFS

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

6. 實(shí)現(xiàn)上傳圖片到IPFS的Promise函數(shù)

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)上傳圖片內(nèi)容
• 上傳圖片

saveImageOnIpfs(reader).then((hash) => {console.log(hash);this.setState({imgSrc: hash})});

hash即是上傳到IPFS的圖片的HASH地址，this.setState({imgSrc: hash})將hash保存到狀態(tài)機(jī)變量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);// 上傳數(shù)據(jù)到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="區(qū)塊鏈部落" style= src={"http://localhost:8080/ipfs/" + this.state.imgSrc}/></div>: <img alt=""/>}</div>);} }export default App

9. 運(yùn)行項(xiàng)目

• npm start
• 新建終端，啟動(dòng)節(jié)點(diǎn)服務(wù)ipfs daemon

10. 總結(jié)

這本文章主要復(fù)習(xí)如何創(chuàng)建React項(xiàng)目，如何安裝ipfs-api，如何編寫(xiě)上傳圖片到IPFS的Promise函數(shù)，下一篇我們將介紹，如何將圖片hash存儲(chǔ)到區(qū)塊鏈，如何從區(qū)塊鏈取到hash，并且通過(guò)hash從ipfs拿到圖片。

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。