7-4、5、6 react+ipfs上传文件数据及相关配置（react+区块链实战）

news2024/12/24 11:34:10

7-4、5、6 react+ipfs上传文件数据及相关配置（react+区块链实战）

  • 7-4 react+ipfs上传文件
  • 7-5 react+ipfs 上传数据+ipfs跨域配置
  • 7-6 react+ipfs读取ipfs网络数据

7-4 react+ipfs上传文件

引入之前安装的ipfs-api
在这里插入图片描述

在电脑后台启动ipfs的服务
ipfs daemon（这个是go-api的不使用）
在这里插入图片描述

这里直接使用jsipfs进行后台服务启动
发现版本不兼容，之前还可以启动来，这估计是新安装ipfs-desktop导致的

jsipfs daemon（使用js的版本可以启动）

一个是0.8.0版本的

一个是0.6版本的

在这里插入图片描述

这里没有卸载ipfs桌面版，在重启电脑后启动jsipfs daemon就能打开js的ipfs服务了

在这里插入图片描述

在这里插入图片描述

如果出现了某个模块未安装的情景
在这里插入图片描述

关闭start

执行
Npm install

执行npm start后结果应如下

在这里插入图片描述

此处是上传文本的，也可以改成上传文件的按钮

在这里插入图片描述

文本上传之后会显示哈希值显示在页面

我们可以将文本读取
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

上方未做值的拼接先不用
显示不是一串字符故下方

使用下方
在这里插入图片描述

handleClick(){
console.log(this.state.text)
}

<input value={this.state.text} onChange={(e)=>{
this.setState(
{text:e.target.value}
)
}}/>
上方input将value输入的值保存到state状态中的text中，点击提交时，会调用打印
将状态state中的text打印出来如下

在这里插入图片描述

在这里插入图片描述

//将input中的内容保存到ipfs上
	saveTextToIpfs(text){
		//要将其转换成buffer上传
		const descBuf = Buffer.from(text,'utf-8')
			ipfs.add(descBuf).then(res=>{
				console.log(res)
			})
	}
	
	handleClick(){
		this.saveTextToIpfs(this.state.text)
		//console.log(this.state.text)	//打印保存到状态中的text值
	}

值浏览器刷新看到有报错（预料之中的报错，由于跨域导致的）
在这里插入图片描述

预料之中的报错，由于跨域导致的
第一个错误跨域导致的

第二个错误是逻辑问题
在这里插入图片描述

想向5001端口发送，但是我们现在的本地端口是在3000，需要在ipfs之上进行跨域配置（下节课讲）

本节所有代码

import React from 'react';
import ipfsAPI from 'ipfs-api';

let ipfs = ipfsAPI('localhost','5001',{protocol:'http'})	//本地启动服务默认5001端口

class App extends React.Component{

	constructor(propos){
		super(propos)
			//状态，上传内容，上传后的哈希
		this.state = {
			text : '', //保存上传的文本
			content:'',
			hash:''
		}
		//绑定按钮(否则会this穿透)
		this.handleClick = this.handleClick.bind(this)
		//this.handleReadClick = this.handleReadClick.bind(this) 若不想绑定可以使用下方的箭头函数,两种方式
	}

	//将input中的内容保存到ipfs上
	saveTextToIpfs(text){
		//要将其转换成buffer上传
		const descBuf = Buffer.from(text,'utf-8')
			ipfs.add(descBuf).then(res=>{
				console.log(res)
			})
	}
	
	handleClick(){
		this.saveTextToIpfs(this.state.text)
		//console.log(this.state.text)	//打印保存到状态中的text值
	}

	handleReadClick(){
	
	}

	//console.log(e.target.value)
	//e.target.value就是我们输入的值在input中
	render(){
		return(
			<div className='App'>
				<input value={this.state.text} onChange={(e)=>{
					this.setState(
						{text:e.target.value}
					)
				}}/>
				<button onClick={this.handleClick}>submit to ipfs</button>
				<hr/>
				<p>
					{this.state.hash}
				</p>
				<button onClick={()=>this.handleReadClick()}>read from ipfs</button>
				<p>
					{this.state.content}
				</p>
			</div>
		);
	
	}
}

export default App

7-5 react+ipfs 上传数据+ipfs跨域配置

之前提交数据发现会报错
在这里插入图片描述

实际上像ipfs接口请求数据并没有配置上

在jsipfs daemon启动后进行配置
在这里插入图片描述

如下
Jsipfs config show

在这里插入图片描述

可以看到所有api相关的配置，我们是没有header相关的配置的

在ipfs教程官网也可搜到相关配置的

jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods ‘[“GET”],[“POST”]’
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin ‘[“*”]’
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials ‘[“true”]’
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers ‘[“Authorization”]’
jsipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers ‘[“Location”]’

https://www.cnblogs.com/yinian/p/9836853.html
注意：在window环境下，执行以上命令时可能报错，修改命令为：
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods “[“PUT”, “POST”, “GET”, “OPTIONS”]”
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin “[”*“]”
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials “[“true”]”
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers “[“Authorization”]”
jsipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers “[“Location”]”

在cmd命令行输入上方的命令，不对加入
在这里插入图片描述

然后show可以看到如下
jsipfs config show
在这里插入图片描述

此时跨域配置成功
在展示config多出了API的数据

此时可以重新启动jsipfs daemon，再执行jsipfs config show依然存在
在这里插入图片描述

此时再输入123点击提交发现还是这个错误（因为端口冲突了5001）
在这里插入图片描述

找到App.js中
将5001的端口改成5002，本地的桌面版的端口与命令行版有冲突

在这里插入图片描述

在这里插入图片描述

修改代码只让其显示hash
在这里插入图片描述

在这里插入图片描述

将此hash值复制出来
QmYkMuFZj7tyHFJRVe7ucqMNYGEiSXrjKdudm2mu7UD7er

来到命令行中
jsipfs cat QmYkMuFZj7tyHFJRVe7ucqMNYGEiSXrjKdudm2mu7UD7er
在这里插入图片描述

就将值打印出来了

说明文本已经传递到ipfs上了

获取ipfs官网内容的规则
https://ipfs.io/ipfs/QmYkMuFZj7tyHFJRVe7ucqMNYGEiSXrjKdudm2mu7UD7er

如何访问ipfs的官网
https://blog.csdn.net/weixin_30852451/article/details/96953573
209.94.90.1 ipfs.io
更改hosts文件
注意不关机重启的话要刷新DNS在cmd下
ipconfig /flushdns

此时可以访问链接数据了如下
在这里插入图片描述

说明本地的ipfs同步到公网之上了

所有代码如下

import React from 'react';
import ipfsAPI from 'ipfs-api';

let ipfs = ipfsAPI('localhost','5002',{protocol:'http'})	//本地启动服务默认5001端口


class App extends React.Component{

	constructor(propos){
		super(propos)
			//状态，上传内容，上传后的哈希
		this.state = {
			text : '', //保存上传的文本
			content:'',
			hash:''
		}
		//绑定按钮(否则会this穿透)
		this.handleClick = this.handleClick.bind(this)
		//this.handleReadClick = this.handleReadClick.bind(this) 若不想绑定可以使用下方的箭头函数,两种方式
	}

	//将input中的内容保存到ipfs上
	saveTextToIpfs(text){
		//要将其转换成buffer上传
		const descBuf = Buffer.from(text,'utf-8')
			ipfs.add(descBuf).then(res=>{
				console.log(res[0].hash)
			})
	}
	
	handleClick(){
		this.saveTextToIpfs(this.state.text)
		//console.log(this.state.text)	//打印保存到状态中的text值
	}

	handleReadClick(){
	
	}

	//console.log(e.target.value)
	//e.target.value就是我们输入的值在input中
	render(){
		return(
			<div className='App'>
				<input value={this.state.text} onChange={(e)=>{
					this.setState(
						{text:e.target.value}
					)
				}}/>
				<button onClick={this.handleClick}>submit to ipfs</button>
				<hr/>
				<p>
					{this.state.hash}
				</p>
				<button onClick={()=>this.handleReadClick()}>read from ipfs</button>
				<p>
					{this.state.content}
				</p>
			</div>
		);
	
	}
}

export default App

7-6 react+ipfs读取ipfs网络数据

在上一章节的基础上

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

从ipfs读取数据

函数名和命令行基本一致
在这里插入图片描述

在这里插入图片描述

读取出来的是uint8的数组，完全可以将其转换成string类型的
https://blog.csdn.net/tsyx/article/details/79487645
上方必看
https://www.cnblogs.com/yinian/p/9836740.html

  ipfs.cat(this.state.hash).then((stream)=>{

                  console.log(stream);
                  var content=stream;
                  this.setState({content});
              });

这里不知为什么点击获取内容时失败报错如下

在这里插入图片描述

一直未找到问题，始终报错
尝试重新安装（可能是下载的ipfs-api不够完整）
Npm install
在这里插入图片描述

重新启动
Npm start

Jsipfs daemon

还是报错
在这里插入图片描述

上传成功后，可以在cmd jsipfs cat hash查看
但就是无法使用代码函数读取ipfs.cat
获取一个哈希值的文件内容失败

视频演示成功如下：
在这里插入图片描述

可以将uint8转换成string来展示

在这里插入图片描述

完整的效果如下
在这里插入图片描述

可以获取内容并显示到了界面

到公网查看数据，本地上传数据后和公网同步也是比较长时间的
在这里插入图片描述

命令行是可以读取的

下一章就是react+ipfs+在线教育

将文件上传到ipfs得到哈希值，将哈希值存到以太坊，再通过哈希值从ipfs将文件取出

该问题解决（无法读取ipfs中数据）
直接关闭jsipfs daemon命令行的启动（使用ipfs daemon启动之前的跨域配置此处也配置了）

桌面版自带ipfs的，尽管其使用go-ipfs的接口
但是当其启动后，本身5001的端口，APP.js的端口一改，再进行写入读取就没有错误了

原因很有可能是在windows使用的开启后的API端口和视频中不同后面多了个http
如下
在这里插入图片描述

HTTP API listening on /ip4/127.0.0.1/tcp/5002/http

而视频中的没有

在这里插入图片描述

解决方案直接启动ipfs daemon（下载的桌面版自带的即可）

在这里插入图片描述

再次将代码更改

在这里插入图片描述

运行成功后如下
在这里插入图片描述

已经得到uint8的字符了，此处需要将其转变为字符串

代码更改
在这里插入图片描述
在这里插入图片描述

所有的代码如下（确认成功运行）：

import React from 'react';
import ipfsAPI from 'ipfs-api';

let ipfs = ipfsAPI('localhost','5001',{protocol:'http'})	//本地启动服务默认5001端口


class App extends React.Component{

	constructor(propos){
		super(propos)
			//状态，上传内容，上传后的哈希
		this.state = {
			text : '', //保存上传的文本
			content:'',
			hash:'',
		}
		//绑定按钮(否则会this穿透)
		this.handleClick = this.handleClick.bind(this)
		//this.handleReadClick = this.handleReadClick.bind(this) //若不想绑定可以使用下方的箭头函数,两种方式
	}

	//将input中的内容保存到ipfs上
	saveTextToIpfs(text){
		//要将其转换成buffer上传
		const descBuf = Buffer.from(text,'utf-8')
			ipfs.add(descBuf).then(res=>{
				//将获取到的hash放到当前状态state的hash中
				this.setState({
					hash:res[0].hash
				})
				//console.log(res[0].hash)
			})
	}
	
	handleClick(){
		this.saveTextToIpfs(this.state.text)
		//console.log(this.state.text)	//打印保存到状态中的text值
	}

	handleReadClick(){
		//console.log(this.state.hash)
		//下方代码有误，需测试
		ipfs.cat(this.state.hash).then(res=>{
			//console.log(res)
			let content = new TextDecoder('utf-8').decode(res)	//对uint8数组解码为字符串
			this.setState({
				content
			})
		})

	}

	//console.log(e.target.value)
	//e.target.value就是我们输入的值在input中
	render(){
		return(
			<div className='App'>
				<input value={this.state.text} onChange={(e)=>{
					this.setState(
						{text:e.target.value}
					)
				}}/>
				<button onClick={this.handleClick}>submit to ipfs</button>
				<hr/>
				<p>
					hash is : {this.state.hash}
				</p>
				<button onClick={()=>this.handleReadClick()}>read from ipfs</button>
				<p>
					{this.state.content}
				</p>
			</div>
		);
	
	}
}

export default App

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1924575.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智慧城市3d数据可视化系统提升信息汇报的时效和精准度

智慧城市3d数据可视化系统提升信息汇报的时效和精准度

在信息大爆炸的时代&#xff0c;数据的力量无可估量。而如何将这些数据以直观、高效的方式呈现出来&#xff0c;成为了一个亟待解决的问题。为此&#xff0c;我们推出了全新的3D可视化数据大屏系统&#xff0c;让数据“跃然屏上”&#xff0c;助力您洞察先机&#xff0c;决胜千…
阅读更多...
nginx的四层负载均衡实战

nginx的四层负载均衡实战

目录 1 环境准备 1.1 mysql 部署 1.2 nginx 部署 1.3 关闭防火墙和selinux 2 nginx配置 2.1 修改nginx主配置文件 2.2 创建stream配置文件 2.3 重启nginx 3 测试四层代理是否轮循成功 3.1 远程链接通过代理服务器访问 3.2 动图演示 4 四层反向代理算法介绍 4.1 轮询&#xff0…
阅读更多...
AI人工智能开源大模型生态体系分析

AI人工智能开源大模型生态体系分析

人工智能开源大模型生态体系研究 "人工智能开源大模型生态体系研究报告v1.0"揭示&#xff0c;AI(A)的飞速发展依赖于三大核心&#xff1a;数据、算法和算力。这一理念已得到业界广泛认同&#xff0c;三者兼备才能推动AI的壮大发展。随着AI大模型的扩大与普及&#xf…
阅读更多...
【学习笔记】4、组合逻辑电路(下)

【学习笔记】4、组合逻辑电路(下)

接前文《【学习笔记】4、组合逻辑电路(上)》 4.4.5 算术运算电路 1. 半加器和全加器 半加器和全加器是算术运算电路中的基本单元。半加器和全加器是1位相加的组合逻辑电路。 &#xff08;1&#xff09;半加器 半加器&#xff1a;只考虑两个加数本身&#xff0c;不考虑低位进…
阅读更多...
WPF学习(6) -- WPF命令和通知

WPF学习(6) -- WPF命令和通知

一 、WPF命令 1.ICommand代码 创建一个文件夹和文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Input;namespace 学习.Command {public class MyCommand : ICommand{Acti…
阅读更多...
再升级！视频理解大模型 CogVLM2 开源

再升级！视频理解大模型 CogVLM2 开源

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型技术趋势、算法项目落地经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 总结链接如…
阅读更多...
海康相机GrabImage

海康相机GrabImage

#include <stdio.h> #include <Windows.h> #include <process.h> #include <conio.h> #include "MvCameraControl.h"bool g_bExit false;// ch:等待按键输入 | en:Wait for key press void WaitForKeyPress(void) {while(!_kbhit()){Sleep(…
阅读更多...
华为配置蓝牙终端定位实验

华为配置蓝牙终端定位实验

个人主页&#xff1a;知孤云出岫 目录 配置蓝牙终端定位示例 业务需求 组网需求 数据规划 配置思路 配置注意事项 操作步骤 配置文件 配置蓝牙终端定位示例 组网图形 图1 配置蓝牙终端定位示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业…
阅读更多...
前后端，数据库以及分布式系统

前后端，数据库以及分布式系统

1. 前端&#xff08;Frontend&#xff09; 定义&#xff1a; 前端是用户直接与之交互的部分&#xff0c;通常在浏览器中运行。它负责呈现和展示数据&#xff0c;与用户进行交互。 关键点&#xff1a; HTML/CSS/JavaScript&#xff1a; HTML定义了页面结构&#xff0c;CSS负责…
阅读更多...
STM32之六：SysTick系统滴答定时器

STM32之六：SysTick系统滴答定时器

目录 1. SysTick简介 2. 时钟来源 3. SysTick寄存器 3.1 CTRL—SysTick控制及状态寄存器 3.2 RELOAD—SysTick重装载数值寄存器 3.3 CURRENT—SysTick当前数值寄存器 4. systick系统定时器配置 5. 延时函数实现 5.1 延时函数编写步骤 5.2 微秒级延时函数delay_us 5.…
阅读更多...
邮箱表单系统源码

邮箱表单系统源码

邮箱表单简介 我们的邮箱表单系统是一个简洁高效的工具&#xff0c;旨在为用户提供一种便捷的方式来提交他们的邮箱地址。该系统可以用于订阅新闻通讯、注册活动、获取用户反馈等多种场景。 功能特点&#xff1a; 用户友好的界面&#xff1a; 表单设计简洁直观&#xff0c;用…
阅读更多...
pytorch说明

pytorch说明

深度学习中的重要概念&#xff1a; 激活函数&#xff1a; 激活函数的必要性&#xff1a;激活函数不是绝对必须的&#xff0c;但在深度学习中&#xff0c;它们几乎总是被使用。激活函数可以引入非线性&#xff0c;这使得神经网络能够学习更复杂的模式。 激活函数的位置&#x…
阅读更多...
【学习笔记】无人机（UAV）在3GPP系统中的增强支持(一)-3GPP TR 22.829 V17.1.0技术报告

【学习笔记】无人机（UAV）在3GPP系统中的增强支持(一)-3GPP TR 22.829 V17.1.0技术报告

本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。 下载…
阅读更多...
安全防御实验2

安全防御实验2

一、实验拓扑 二、实验要求 办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换)分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器多出口环境基于带宽比例进行选路&#xff0c;但是&#xff0c;办公区…
阅读更多...
如何在Mac上恢复已删除的文件？

如何在Mac上恢复已删除的文件？

多数 Mac 用户在将 Mac 出售或赠送给其他用户之前会擦除数据。这样做是必要的&#xff0c;因为它有助于保护隐私并防止任何人滥用您的机密数据。在大多数情况下&#xff0c;您会故意抹掉数据和文件。但在某些情况下&#xff0c;你做错了。 大多数人可能认为文件擦除和文件删除…
阅读更多...
二次开发源码 借贷系统uniapp/借贷认证系统/小额信贷系统/工薪贷APP/资金贷系统h5

二次开发源码 借贷系统uniapp/借贷认证系统/小额信贷系统/工薪贷APP/资金贷系统h5

前端&#xff1a;UNIAPP 后端&#xff1a;ThinkPHP 数据库&#xff1a; Mysql 前端使用的uniapp 可以打包APP H5 小程序 系统提供了完善的网络借贷体系&#xff0c;为金融中介平台提供从获客到贷后管理全流程服务&#xff0c;解决了借贷手续繁琐、流程缓慢等问题 此源码为运营…
阅读更多...
线程池-拒绝策略

线程池-拒绝策略

线程池-拒绝策略 RejectedExecutionHandlerAbortPolicyCallerRunsPolicyDiscardPolicyDiscardOldestPolicy自定义拒绝策略 当核心线程已用尽 & 阻塞队列已满 & 超过最大线程数时&#xff0c;再向线程池提交任务&#xff0c;则会触发线程池的拒绝策略。 RejectedExecuti…
阅读更多...
35 解决单条链路故障问题-华三链路聚合

35 解决单条链路故障问题-华三链路聚合

InLoopBack接口是一种虚拟接口。InLoopBack接口由系统自动创建&#xff0c;用户不能进行配置和删除&#xff0c;但是可以显示&#xff0c;其物理层和链路层协议永远处于up状态。InLoopBack接口主要用于配合实现报文的路由和转发&#xff0c;任何送到InLoopBack接口的IP报文都会…
阅读更多...
Linux系统编程之基础I/O

Linux系统编程之基础I/O

一、C文件接口 1、hello.c写文件 #include <stdio.h> #include <string.h>int main() {FILE *fp fopen("myfile", "w");if(!fp){printf("fopen error!\n");}const char *msg "hello bit!\n";int count 5;while(count-…
阅读更多...
LabVIEW学习-LabVIEW储存Excel表格

LabVIEW学习-LabVIEW储存Excel表格

上述实现了将格式化的时间和正弦波的频率振幅相位以及正弦波数据输入到excel表格中。 下面介绍其中使用到的函数&#xff1a; 1. 所在位置&#xff0c;函数选板->定时->获取日期/时间(秒) 2. 将获取的时间进行格式化处理&#xff0c;输出格式化的日期/时间字符串。 函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023