1. IPFSER首页
  2. IPFS

【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载

本期技术周报,我们来从前端的角度学习ipfs文件的上传与下载需要使用的指令及操作过程。

【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载

 
本期技术周报,我们来从前端的角度学习ipfs文件的上传与下载需要使用的指令及操作过程。

React简介及安装
React是由Facebook和Instagram来开发的一种用来创建用户界面的JavaScript库。
首先你要保证电脑上已经安装了Node.js的最近版本
npm install -g create-react-app
React-dom,react-scripts等react依赖包
React项目创建
$ create-react-app ipfs-demo
创建一个ipfs-demo的文件夹(这个文件夹就是项目的文件夹)
 npm startStarts thedevelopment server.npm run buildBundles the appinto static files for production.cd ipfs-demonpm start
在项目根目录输入npm start命令,查看项目在浏览器的显示效果:
安装js-ipfs-api
npm install --save ipfs-api
(-s生产环境  -D开发环境)
1
安装成功会在项目node_modules目录下多出ipfs-api文件夹,在package.json下增加依赖包信息:
import React, { Component } from ‘react’;import ‘./App.css’;class App extends Component {constructor(props) {super(props);this.state= {strHash:null,strContent: null}}render() {return (<input< span=””>ref=”ipfsContent”style=/>{letipfsContent = this.refs.ipfsContent.value;console.log(ipfsContent);}}>提交到IPFS{this.state.strHash}{console.log(‘从ipfs读取数据。‘)}}>读取数据{this.state.strContent});}}export default App;
以上代码实现的功能是,当在输入框中输入文本时,再点击提交到IPFS按钮,将文本框中的内容取出来打印,后续需要将这个数据上传到IPFS。点击读取数据按钮,控制台打印出字符串,后面需要从IPFS读取数据,然后将读取的数据存储到状态机变量strContent中并展示出来。
导入IPFS
const ipfsAPI = require(‘ipfs-api’);const ipfs = ipfs = ipfsAPI({host: ‘localhost’, port:’5001′, protocol: ‘https’});
编写上传大文本字符串到IPFS的Promise函数
(获取文件的哈希)
saveTextBlobOnIpfs =(blob) => {return new Promise(function(resolve,reject) {const descBuffer = Buffer.from(blob,’utf-8′);ipfs.add(descBuffer).then((response)=> {console.log(response)resolve(response[0].hash);}).catch((err) => {console.error(err)reject(err);})})}
response[0].hash返回的是数据上传到IPFS后返回的HASH字符串。 

上传数据到IPFS
(将文件上传到ipfs)
this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {console.log(hash);this.setState({strHash: hash});});
ipfsContent是从文本框中取到的数据,调用this.saveTextBlobOnIpfs方法将数据上传后,会返回字符串hash,并且将hash存储到状态机变量strHash中。
用正确的端口运行daemon
$ ipfs daemon
从IPFS读取数据
ipfs.cat(this.state.strHash).then((stream) => {console.log(stream);let strContent =Utf8ArrayToStr(stream);console.log(strContent);this.setState({strContent: strContent});});
最终完整的App.js代码如下:
import React, { Component } from ‘react’;import logo from ‘./logo.svg’;import ‘./App.css’;const ipfsAPI = require(‘ipfs-api’);const ipfs = ipfsAPI({host:’localhost’, port:’5001′,protocal:’https’});class App extends Component {constructor(props){super(props);this.state = {strHash: null,strContent:null}}saveTextBlobOnIpfs= (blob) => {return new Promise(function(resolve,reject) {constdescBuffer = Buffer.from(blob, ‘utf-8’);ipfs.add(descBuffer).then((response) => {console.log(response)resolve(response[0].hash);}).catch((err)=> {console.error(err)reject(err);})})}render() {return (<input< span=””>ref=”ipfsContent”style={{width:200,height:30}}/>{let ipfsContent= this.refs.ipfsContent.value;console.log(ipfsContent);this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {console.log(hash);this.setState({strHash: hash});});}}>提交到IPFS{this.state.strHash} {console.log(‘从ipfs读取数据‘)ipfs.cat(this.state.strHash).then((stream) => {console.log(stream);letstrContent = Utf8ArrayToStr(stream);console.log(strContent);this.setState({strContent: strContent});});}}>读取数据{this.state.strContent}Welcome to ReactTo getstarted, editsrc/App.jsand save to reload.);}}export default App;
以上就是本期技术周报的全部内容,感谢您的观看。 
【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载
IPFS原力区是全球第一大IPFS价值生态社区,总部位于上海,聚集了众多技术大咖和IPFS爱好者;IPFS原力区秉持:价值,共建,共赢,荣耀的文化理念;提供全面、精细、优质的IPFS咨询和技术支持,将生态中的爱好者转化为IPFS支持者和参与者。未来,IPFS原力区做好价值文化基因传播、紧盯人工智能,量子计算,大数据等前沿科技,把IPFS区块链技术随时架设在最新的技术基础之上,推动IPFS生态的健康发展。
 

 IPFS官网:https://ipfsforce.com

 IPFSER社区: https://ipfser.org

 微博:https://weibo.com/ipfsforce

IPFS原力区

价值 · 共建 · 共享 · 荣耀

 

【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载

【IPFS原力区技术周报】第十五期 前端ipfs的文件上传与下载

长按二维码识别关注我们

原创文章,作者:IPFSforce,如若转载,请注明出处:https://ipfser.org/2018/11/06/ipfsyuanliqujishuzhoubao15qi/

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:ipfsforce@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code