以太坊实战篇-Vue上传文件到IPFS

最新推荐文章于 2024-07-13 22:57:01 发布
最新推荐文章于 2024-07-13 22:57:01 发布
阅读量5.1k 收藏 6
点赞数 2
文章标签： vue.js 以太坊 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012331525/article/details/122256442
版权
本文介绍如何在以太坊实战项目中，利用Vue将文件上传至IPFS。IPFS是一个去中心化的存储系统，与传统云存储不同，其资源分散在多个节点。文章详细阐述了从初始化Vue项目，安装依赖，到添加文件上传功能的步骤，并展示了成功上传后的效果，用户可通过公共网关访问上传的文件。
摘要由CSDN通过智能技术生成

以太坊实战篇-Vue上传文件到IPFS

IPFS是InterPlanetary File System的简称，中文是星际文件系统。

它和百度网盘在使用上区别不大，最大的区别是百度网盘的资源都掌控在百度这一家企业手中，而IPFS中的资源则是掌握在无数个IPFS节点中，没有任何人可以说，“嗨，这个文件不能上传，即使上传了不能下载！”。

  1. 初始化项目

首先拷贝一个初始化好的空白Vue项目到本地，这个项目是我们的基础项目dapp-basic，拷贝时直接将其命名为ipfs

$ git clone https://gitee.com/ibmeye/dapp-basic ipfs

运行下面的命令安装依赖包并启动项目

$ yarn
$ yarn run serve

启动后可以看到如下界面

image-20211231145159853

  1. 在项目根下运行下面的命令，添加ipfs依赖
$ yarn add ipfs-http-client
  1. 打开src/components/MainContent.vue文件，添加图片标签、按钮标签及其处理函数。

修改前的代码(只包含部分代码，详见附录中的源码下载地址)：

<template>
  <el-container>
    <el-container>
      <el-header>
        <span class="bilibili-text">DApp开发</span>
        <span class="tarot-text">基础模板</span>
        <span class="account-text">登录账户</span>
      </el-header>
      <el-main>
        <div class="img-wrapper">
          <el-image class="img-panel" :src="src"></el-image>  
          <el-button class="img-btn">上传图片</el-button
最低0.47元/天 解锁文章
嘻嘻哈哈的栗子
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
基于区块链与IPFS的数据共享系统搭建步骤
TrueTechLabs 官方博客
01-04 5459
本系统使用RSA算法生成密钥对， RSA私钥用于用户身份认证；用户发送的数据将存储于IPFS， IPFS返回的CID（IPFS Hash）使用用户的RSA私钥加密后存储于区块链; 区块链部分使用Hyperledger Fabric,并用Hyperledger Explorer追踪交易
vipfs：Vue.js + IPFS = VIPFS。 创建不可阻挡的应用程序
02-04
| | | | 贵宾室 VIPFS是一个简单的样板项目，用于创建无法脱机，阻止或审查的永久应用，博客和网站。 该应用程序是使用Vue.js和IPFS构建的，它带有有用的模板，并且已与Bootstrap，FontAwesome，Video.js，Vuex和VueRouter预先集成。 只需克隆，构建和运行npm run publish即可将其部署到IPFS上，并使其永久适用于全世界。 入门 $ git clone git@github.com:Ideea-inc/vipfs.git $ cd vipfs $ npm install $ npm run build $ docker-compos
7-4、5、6 react+ipfs上传文件数据及相关配置（react+区块链实战）
最新发布
qq_44870829的博客
07-13 852
直接关闭jsipfs daemon命令行的启动（使用ipfs daemon启动之前的跨域配置此处也配置了）想向5001端口发送，但是我们现在的本地端口是在3000，需要在ipfs之上进行跨域配置（下节课讲）但是当其启动后，本身5001的端口，APP.js的端口一改，再进行写入读取就没有错误了。读取出来的是uint8的数组，完全可以将其转换成string类型的。可以看到所有api相关的配置，我们是没有header相关的配置的。将5001的端口改成5002，本地的桌面版的端口与命令行版有冲突。
Vue2 结合 IPFS (星际文件系统)实现文件上传
曹俊的博客
09-27 863
vue2结合IPFS文件系统实现文件图片上传，可以搭建多节点的文件系统，在其他节点可以实现图片查看
前端利用 ipfs 上传文件
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
10-30 6593
IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。 内容可寻址：通过文件内容生成唯一哈希值来标识文件，而不是通过文件保存位置来标识。相同内容的文件在系统中只会存在一份，节约存储空间 版本化：可追溯文件修改历史 点对点超媒体：P2P 保存各种各样类型的数据...
vue 获取当前发布的版本_去中心化网络协议IPFS发布新版本：数据上传速度提高25倍，内容获取速度提高2～5倍...
weixin_35615591的博客
01-25 152
免责声明：本文旨在传递更多市场信息，不构成任何投资建议。文章仅代表作者观点，不代表火星财经官方立场。小编：记得关注哦来源：火星一线文 | 梁雨山火星财经APP(微信：hxcj24h)一线报道，4月29日，据Cointelegraph消息，去中心化文件和网络托管协议IPFS已于近日进行网络升级，发布IPFS 0.5版本，实现将数据传输速度提高25倍，找到具有该数据的节点速度提高2～6倍，内容获取速度...
vuepress-plugin-ipfs：在IPFS上托管任何VuePress项目
02-03
VuePress插件IPFS 将 1.x捆绑包转换为相对路径，使其适合在IPFS上托管。 用法 npm i -D vuepress-plugin-ipfs 建立 添加到config.js或theme/index.js module.exports = { plugins: [ ['vuepress-plugin-ipfs'], ] } 一旦包含此插件，它将在生产构建过程中对所有生成的页面和CSS文件进行后期处理，以使用相对资产路径。 $ withBase-基本URL助手 将通过可变深度访问IPFS上托管的站点，因此在可能的情况下尽可能使用资产的相对路径非常重要，但是在某些情
Vue实战篇五：实现文件上传
热门推荐
我的博客
10-28 1万+
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
Vuethexplore-一个简单的应用程序使用vuejs探索以太坊区块链。-Vue.js开发
05-27
vuethexplore用于以太坊区块链探索的Vue项目。 用法克隆repo npm install npm run dev测试单元npm run unit e2e npm run e2e all n vuethexplore用于以太坊区块链探索的Vue项目。 用法克隆存储库npm install npm run...
springboot、vue-simple-uploader文件上传、续传、秒传 源码
02-27
demo.zip为springboot idea工程，直接启动DemoApplication fileManage.zip为vue工程，解压后运行安装npm install，启动npm run dev
ipfs-blockchain:使用IPFS，以太坊区块链，Laravel和VueJS构建的项目
05-01
使用VueJS和Laravel构建的IPFS区块链 该项目演示了如何将区块链与IPFS集成在一起以存储和跟踪文件历史记录。 该应用程序使用Laravel，VueJS，IPFS和以太坊区块链构建 介绍 将数据保存在区块链上非常昂贵。 您应该看到这篇。 使用我们可以通过保存保存在IPFS系统中的数据散列，将大量数据“保存”到区块链中。 入门 这些说明将为您提供在本地计算机上运行并运行的项目的副本，以进行开发和测试。 先决条件 您需要什么东西来安装软件以及如何安装它们 Geth Go-ipfs 正在安装 一系列循序渐进的示例，告诉您必须运行开发环境 首先，您需要安装Geth 。 遵循此指令您应该进行设置，初始化创世块，然后在运行命令以启动Geth时，应在命令末尾添加这些选项。 --rpc --rpccorsdomain "*" --rpcapi “web3,eth,personal” 然后，
ipfs-eos-demo:演示如何将文本和图像保存到ipfs并将哈希存储在EOS区块链上
05-11
IPFS EOS演示 这是一个Vue.js示例，使用IPFS存储图像和文本，然后将来自IPFS的哈希作为字符串存储在EOS区块链上。 此示例显示： 将文本保存到IPFS，然后将IPFS返回的哈希存储在EOS区块链上 将图像保存到IPFS，然后将IPFS返回的哈希存储在EOS区块链上 从EOS区块链中获取哈希，然后查询IPFS中的图像或文本 设定档 创建一个名为secrets.js的文件，并将其添加到config目录中。 将其粘贴到文件中，然后为应用添加您的实际端点和密钥： module.exports = { endpoint: "http://x.x.x.x:8888", keys: [ 'keygoeshere, 'keygoeshere', ] }; 开始使用： npm run dev
eth-vue：出现在Awesome Vue [https：github.comvuejsawesome-vue]中，这是由vuejs维护的与Vue.js框架相关的令人敬畏的事物的精选列表，以及Awesome List [https：awesomelists.net150-Vue.js3863-Open + Source18749-DOkwufulueze-eth-vue]，此松露盒提供了快速构建具有vue身份验证功能的以太坊dApp所需的一切，包括易于部署到Ropsten网络的配置。 它还具有Grava
02-05
这个Truffle Box提供了快速构建具有身份验证功能的以太坊dApp所需的一切，包括易于部署到Ropsten Network的配置。 它还具有Gravatar功能。 也可以从Truffle连接到运行中的链网络-用于快速开发和测试目的。 基于构建...
通过elementui-vue上传文件到本地服务器
lpt1314的博客
06-10 3517
(1)引入文件上传的依赖 (2)创建一个页面 （3）在springmvc中配置文件上传解析器 (4)创建upload接口方法 3.elementui+vue+axios完成文件上传 (1)页面的查询 （2）后台的接口 4.上传到oss阿里云的服务器 上传到本地服务器的缺点: 如果搭建集群，导致文件无法在集群中共享。 它的解决方法就是把文件专门上传到一个文件服务器上，这些tomcat服务器都操作同一个文件服务器。（1）创建bucket容器 可以在该bucket中通过网页面板的形
4.通过ipfs-api上传文件到ipfs
第一高度的专栏 - 祝愿大家坚持学习，持续进步，最终实现理想！
03-09 8147
本节主要讨论如何基于Web前端调用ipfs-api上传文件到ipfs，通过npm start 启动项目 1. 安装create-react-app 通过npm install 安装 create-react-app，便于后续创建项目    npm install -g create create-react-app   2. 创建项目   通过 create-react-app...
IPFS：基本配置、如何上传一张图片
lzl001的专栏
08-21 845
1 下载IPFS软件 下载地址：https://dist.ipfs.io/#go-ipfs 打开这个地址后网页会根据你的当前操作系统自动为你选择可供下载的版本，这个页面上有很多ipfs相关的软件下载，看清楚下载 go-ipfs, 这是IPFS的go语言版本实现，IPFS目前还有 js版本和 python版本（开发已停滞，团队忙不过来了） 2 安装 windows：自己选择一个文件，把软件解...
一个可视化的IPFS文件上传、管理工具，可以自动生成元数据。
Meta_World的博客
09-08 715
一个可视化的IPFS文件上传，文件管理工具，可以上传图片，元数据，自动生成OpenSea格式的元数据。
【区块链 | IPFS】通过Web应用向IPFS上传文件
09-21 1228
在Web应用中向IPFS上传文件与IPFS的交互最常见的方式是从客户端应用程序上传图片和视频等文件，但我发现，好像没有很直接明了的教程。在本教程中，你将通过使用ipfs-http-client，以尽可能少的代码（尽可能简单）来学习。这里的想法是在React中实现的，但应该可以相当容易地转移到任何其他JavaScript框架中，如Vue、Angular或Svelte。IPFS是一个去中心化的、点对点的文件共享协议。有各种类型的IPFS网关可用，有些是免费的，有些则不是。有些提供只读访问，有些则提供读写访问。你
vue3.0中使用ant-design-vue上传文件
04-07
在Vue3.0中使用ant-design-vue上传文件，可以按照以下步骤进行： 1. 安装ant-design-vue和axios ``` npm install ant-design-vue axios --save ``` 2. 在main.js中引入ant-design-vue和axios，并注册组件 ``` import { createApp } from 'vue' import App from './App.vue' import { Button, Upload } from 'ant-design-vue' import axios from 'axios' const app = createApp(App) // 注册组件 app.use(Button) app.use(Upload) // 注册axios app.config.globalProperties.$axios = axios app.mount('#app') ``` 3. 在组件中使用Upload组件进行文件上传 ``` <template> <div> <a-upload :action="uploadUrl" :headers="uploadHeaders" :data="uploadData" :before-upload="beforeUpload" :on-success="onSuccess" :on-progress="onProgress" :on-error="onError" > <a-button>上传文件</a-button> </a-upload> </div> </template> <script> export default { data() { return { uploadUrl: 'http://localhost:3000/upload', uploadHeaders: { Authorization: 'Bearer ' + localStorage.getItem('token') }, uploadData: { name: 'example' } } }, methods: { beforeUpload(file) { console.log('beforeUpload', file) }, onSuccess(response) { console.log('onSuccess', response) }, onProgress(progress) { console.log('onProgress', progress) }, onError(error) { console.log('onError', error) } } } </script> ``` 在上面的示例中，我们使用了a-upload组件来上传文件。在组件中，我们可以通过props传入一些参数，比如上传接口的地址、请求头、上传的数据等。同时，还可以通过监听事件来处理上传的结果，比如上传成功、上传进度、上传失败等。 需要注意的是，我们在main.js中通过Vue的全局配置将axios注册到了Vue实例中，因此在组件中可以通过this.$axios来发起请求。在上传文件时，需要将文件数据添加到uploadData中，这样才能将文件上传到服务器。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值