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

最新推荐文章于 2023-02-25 11:57:07 发布

hello小鱼儿

最新推荐文章于 2023-02-25 11:57:07 发布

阅读量3k

点赞数

分类专栏： blockchian 文章标签： ipfs

原文链接：https://medium.com

版权

blockchian 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何在浏览器端直接将图片上传至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上的数据

结果