复习如何创建React项目和编写上传图片到IPFS的Promise函数

来源:区块链研究实验室  作者:区块链研究实验室  时间:2018-11-29

  创建React项目

具体不知道怎么操作的,请移步到区块链研究实验-IPFS Ethereum (上篇)-js-ipfs-api

$create-react-appipfs_img

  完成UI逻辑设计

将下面的代码拷贝替换掉App.js里面的代码。

importReact,{Component}from'react'classAppextendsComponent{
constructor(props){
super(props)this.state={
imgSrc:nullrender(){
return(

上传图片到IPFS:

 

Choosefiletoupload
 
 

{
varfile=this.refs.file.files[0];
varreader=newFileReader();
//reader.readAsDataURL(file);
reader.readAsArrayBuffer(file)
reader.onloadend=(e)=>{
console.log(reader);
//上传数据到IPFS}}>Submit
this.state.imgSrc
?
 

{"http://localhost:8080/ipfs/" this.state.imgSrc}


 

:);
exportdefaultApp

  安装ipfs-api

localhost:1126yuechunli$cdipfs_img/
localhost:ipfs_imgyuechunli$ls
README.mdpackage.jsonsrc
node_modulespublicyarn.lock
localhost:ipfs_imgyuechunli$npminstall--save-devipfs-api

  app.js导入IPFS

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

  实现上传图片到IPFS的Promise函数

letsaveImageOnIpfs=(reader)=>{
returnnewPromise(function(resolve,reject){
constbuffer=Buffer.from(reader.result);
ipfs.add(buffer).then((response)=>{
console.log(response)
resolve(response[0].hash);
}).catch((err)=>{
console.error(err)
reject(err);}

  上传图片到IPFS

varfile=this.refs.file.files[0];
varreader=newFileReader();
//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中。

  完整代码

importReact,{Component}from'react'constipfsAPI=require('ipfs-api');
constipfs=ipfsAPI({host:'localhost',port:'5001',protocol:'http'});letsaveImageOnIpfs=(reader)=>{
returnnewPromise(function(resolve,reject){
constbuffer=Buffer.from(reader.result);
ipfs.add(buffer).then((response)=>{
console.log(response)
resolve(response[0].hash);
}).catch((err)=>{
console.error(err)
reject(err);}classAppextendsComponent{
constructor(props){
super(props)this.state={
imgSrc:null
render(){
return(

上传图片到IPFS:

 

Choosefiletoupload
 
 

{
varfile=this.refs.file.files[0];
varreader=newFileReader();
//reader.readAsDataURL(file);
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/" this.state.imgSrc}


 

:);
exportdefaultApp

  运行项目

  npm start

  新建终端,启动节点服务ipfs daemon

  总结

  这本文章主要复习如何创建React项目,如何安装ipfs-api,如何编写上传图片到IPFS的Promise函数,下一篇我们将介绍,如何将图片hash存储到区块链,如何从区块链取到hash,并且通过hash从ipfs拿到图片。

您可能喜欢
Copyright © 2017 iIPFS.cn IPFS/FileCoin资讯站