IPFS 浏览器端传图片,并显示

本文介绍了如何在浏览器端直接将图片上传至IPFS,并展示详细步骤,包括初始化IPFS服务、解决跨域问题、创建HTML表单、读取文件、转换数据类型、调用IPFS API进行上传,以及展示上传结果。通过这种方式,可以节省带宽成本,提高效率。
摘要由CSDN通过智能技术生成

 

大部分的开发者想要整合IPFS到自己的项目中,然而总会因为各种各样的原因所困扰。

IPFS的优势:

普通开发者上传图片方式如下

这种结构没有什么问题。例如,它允许开发人员编写服务器代码来修改映像。也可以有多种存储解决方案。所有这些解决方案都增加了应用程序所使用的带宽。一个1mb的上传变成了2mb,因为服务器需要将它上传到存储解决方案中。带宽是便宜的,但它可以更便宜!

我们可以编写服务器代码接受数据并将其推入IPFS。但是如果浏览器可以直接上传到IPFS呢?那么之前的2mb上传又变成了1mb !

这很好,因为我们节省了网络成本。这也适用于当前的存储平台。它们可能需要执行一些身份验证请求,但这仍然是可行的。您将看到直接上载到IPFS是多么容易。

开始:

1.ipfs init

2.ipfs daemon 

上述会开启ipfs服务,在使用浏览器访问前需要做一些修改。

1.ctrl+c

2. ipfs config -- json API.HTTPHeaders.Access-Control-Allow-Methods ‘[“PUT”, “GET”, “POST”,^COPTIONS"]'
3.ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'
4.ipfs config --json Addresses.API '"/ip4/0.0.0.0/tcp/5001"'
5.ipfs config --json Addresses.Gateway '"/ip4/0.0.0.0/tcp/8080"'

6.ipfs daemon

2和3的命令用于解决浏览器的跨域问题。4和5开放API和网关给外网ip访问

创建一个test.html

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript file upload</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- <script src="https://wzrd.in/standalone/buffer"></script> -->
    <script src="https://bundle.run/buffer@5.4.0"></script>
    <script src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js"
    integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB"
    crossorigin="anonymous"></script>
  </head>
  <script type="text/javascript">
    function upload() {
      const reader = new FileReader();
      reader.onloadend = function() {
        const ipfs = window.IpfsApi('127.0.0.1', 5001) // Connect to IPFS
        const buf = buffer.Buffer(reader.result) // Convert data into buffer
        ipfs.files.add(buf, (err, result) => { // Upload buffer to IPFS
          if(err) {
            console.error(err)
            return
          }
          let url = `http://127.0.0.1:8080/ipfs/${result[0].hash}`
          console.log(`Url --> ${url}`)
          document.getElementById("url").innerHTML= url
          document.getElementById("url").href= url
          document.getElementById("output").src = url
        })
      }
      const photo = document.getElementById("photo");
      reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
    }
  </script>
  <body>
    <form action="/">
      <fieldset>
        <legend>Upload photo</legend>
        <input type="file" name="photo" id="photo">
        <button type="button" onclick="upload()">Upload</button>
      </fieldset>
    </form>
    </br>
    </br>
    <a id="url"></a>
    </br>
    </br>
    <img id="output">
  </body>
</html>

1.创建id="photo"的HTML输入字段
2.用οnclick="upload()" upload()

3.创建HTML按钮创建实例const reader = new FileReader()
4.用reader.readAsArrayBuffer从 id="photo"元素中读取文件数据
5.当文件数据读取完毕,触发onloaded函数
6.初始化绑定到端口5001上的本地ipfs节点的ipfs对象
7.为从reader.result中读取的图像创建Buffer对象,也就是进行了数据类型转换
8.ipfs.files.add将buffer传给了ipfs,之后回调上传结果
9.读取的结果的hash
10.创建url字符串
11.直接修改DOM上的数据

 

结果

参考 https://medium.com/@angellopozo/uploading-an-image-to-ipfs-e1f65f039da4

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值