1. IPFS点滴资讯首页
  2. 实战操作

将图像上传到IPFS

将图像上传到IPFS

IPFS(行星际文件系统)承诺提供更好,更有效的文件共享方式。例如,不是让教室里的每个人都从Dropbox下载文件,为什么不从房间里的其他人那里下载?这消除了很多网络开销。但是如何将文件放到IPFS网络上呢?我将介绍一个将文件从浏览器直接上传到IPFS的示例。


听众:

这主要适用于希望将IPFS集成到堆栈中的开发人员。需要一些基本的HTML和JavaScript知识。

IPFS入门:

正常上传:

要创建上传功能,开发人员需要从浏览器接收数据,然后将其存储在某个位置。它可以是像Amazon Web Service S3或其他文件托管服务这样的服务。如果需要,他们也可以自己制作一个。但对于预算上的开发团队而言,这可能不是最好的时间利用。

将图像上传到IPFS

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

浏览器到IPFS:

我们可以编写服务器代码接受数据并将其推送到IPFS。但是如果浏览器可以直接上传到IPFS怎么办?然后,之前的2 MB上传再次变为1 MB!

将图像上传到IPFS

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

项目设置:

要运行该示例,您需要在本地计算机上运行IPFS节点。为了简化教程,您还将在本地节点上配置CORS。按照适用于您的操作系统的IPFS安装指南进行操作,然后执行以下操作:

  1. ipfs init
  2. ipfs daemon

这将在本地启动您的IPFS服务器。最后,我们需要配置IPFS以允许CORS。我们必须停止ipfs(ctrl-c)并修改一些东西:

  1. 使用ctrl-c停止IPFS
  2. ipfs config -- json API.HTTPHeaders.Access-Control-Allow-Methods ‘[“PUT”, “GET”, “POST”, “OPTIONS”]’
  3. ipfs config — json API.HTTPHeaders.Access-Control-Allow-Origin ‘[“*”]’
  4. ipfs daemon

我们正在配置ipfs为CORS返回必要的头文件。最后一个命令只是在ipfs本地重新启动服务。

托管网站:

有几种方法可以在您的笔记本电脑上托管网站。您可以使用像node-http ,等服务器SimpleHTTPServer ,或只是拖放index.html到浏览器中。要点就在这里。将文件保存在您选择的目录中。

使用节点来托管网站:

如果要使用节点,请在终端中运行以下命令:

  1. npm install http-server -g
  2. http-server -p 1337

使用Python来托管网站:

如果您使用的是OSX,则很可能默认安装了Python。这很好,因为不需要安装任何东西。在终端中,运行以下命令:

  1. python -m SimpleHTTPServer 1337

以上内容在本地目录中的端口1337上启动HTTP服务器。

使用文件系统托管网站:

托管您网站的最简单方法是将index.html拖放到任何浏览器中。无需安装或运行任何命令。

但是,您托管index.html文件,您应该看到以下内容:

将图像上传到IPFS

例:

该示例是一个IPFS图像上传器的浏览器。让浏览器直接将映像上传到IPFS,开发人员可以减少带宽。通常,为了上传图像,客户端将上传到服务器,然后服务器将其保存在其他地方。为什么有客户端→服务器→目录,当你可以有客户端→目录。

<!DOCTYPE html >
< html >
< >
< title > JavaScript文件上传</ title >
< meta http-equiv = content-type content = text / html; charset = UTF-8 >
< script src = https://wzrd.in/standalone/buffer > < / 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();
读者onloadend = function(){
const ipfs = windowIpfsApi localhost 5001//连接到IPFS
const buf = buffer缓冲区reader结果//将数据转换为缓冲区
ipfs文件add(buf,(errresult=> { //将缓冲区上传到IPFS
if(错误){
控制台错误(错误)
返回
}
let url = ` https://ipfs.io/ipfs/ $ { result [ 0 ]。哈希} `
控制台log` url – > $ { url } `
文件getElementById url )。innerHTML = url
文件getElementById url )。href = url
文件getElementById output )。src = url
})
}
const photo = 文件getElementById photo );
读者readAsArrayBuffer照片文件 [ 0 ]); //读取提供的文件
}
< / script >
< body >
< form action = / >
< fieldset >
< legend >上传照片</ legend >
< input type = file name = photo id = photo >
< button type = button onclick = upload() > Upload </ button >
</ fieldset >
</ form >
</ br >
</ br >
< 一个 ID = URL > </ >
</ br >
</ br >
< img id = output >
</ body >
</ html >
  1. 使用创建HTML输入字段 id="photo"
  2. 使用创建HTML按钮 onclick="upload()"
  3. upload() 创建实例 const reader = new FileReader()
  4. reader.readAsArrayBuffer里面的文件id="photo"元素
  5. 绑定到reader事件发射器方法onloaded
  6. 初始化ipfs绑定到端口5001上的本地IPFS节点的对象
  7. 创建从中读取的图像的缓冲区 reader.result
  8. 调用ipfs.files.add与回调函数缓冲区
  9. result变量
  10. 创建url字符串
  11. 直接修改DOM上的数据

API详细信息:

创建一个从浏览器接收数据然后将其存储在存储平台上的服务很容易。作为开发人员,您可以编写代码来执行您想要的操作。相反,前端开发人员有更多限制,因为他们的代码在浏览器中运行。这有时会增加一些复杂性。

我们将使用FileReader访问文件数据,创建浏览器支持的缓冲区数组,然后使用js-ipfs-api将图像上传到IPFS 

的FileReader:

浏览器无法直接访问目录文件。事实上,FileReader会给你一个伪目录到文件selected(C:/fakedir/some/path.png)。这与服务器代码有很大不同,后者可以轻松地完成和访问文件。不过没关系,因为FileReader可以让你以不同的格式读取文件:readAsArrayBufferreadAsBinaryStringreadAsDataUrlreadAsText。我们readAsArrayBuffer在这个例子中使用。

缓冲:

在Node.js中,您可以访问本required('buffer').Buffer机模块。这意味着我们需要寻找兼容的Buffer功能。幸运的是其他人已经完成了这项工作!我发现了一个feross 兼容浏览器缓冲模块。在示例代码中,我添加了异步html脚本标记以包含bufferjavascript。这创建了一个全局变量buffer对象。如果我使用Webpack,我可以包含缓冲区require('buffer/').Buffer。无论哪种方式,只要缓冲区代码可访问,这将是有效的。

JS-IPFS-API:

IPFS有两个不同的库。有JS-IPFS,它在javascript中实现IPFS协议。然后是JS-IPFS-API,它调用IPFS节点。在上面的示例中,我们使用JS-IPFS-API将数据上载到IPFS。

注意事项:

用户直接上传到IPFS很好,因为它不需要一些服务器代码。一个缺点是它需要用户在本地运行IPFS。大多数用户不知道为什么或如何安装它。有一个Chrome插件,但它仍然可以跳过。另一个缺点是图像不在节点之间复制。如果访问该文件,它们仅存在于节点上。这只是意味着如果服务器A接收到图像,则只有服务器A知道它。我们需要将文件复制到多个服务器以提高文件的可用性。

解决上述问题的一种方法是修改localhost5001端口并托管您自己的IPFS节点。这意味着您必须管理一些服务器,但至少您没有服务器处理上传之间的图像。但是,如果您的服务器关闭,则图像将再次变为不可用。要重新启动,您可以使用ipfs.pin告诉IPFS将映像存储在目录而不是内存中。这适用于单个服务器,但不适用于您托管的所有其他节点。

管理服务器时,您可以将它们视为宠物或牛。在牛服务器时,宠物服务器不容易更换。使用像Ansible这样的工具可以减少管理服务器所需的工作量。

让我们回到服务器销毁后在IPFS中提供映像的主题。目标是将上传的图像放在尽可能多的服务器上,以便更容易访问。将映像上载到一个IPFS节点后,节点可能会再次将其上载到其他服务器。因此,同一图像存在于许多IPFS服务器上。另一种方法是将其保存在AWS或GCE等云平台上。然后,在访问图像时,如果IPFS很慢或未返回,请使用AWS或GCE图像URL。

此文件可用性问题目前已公开。IPFS本身并不能做到这一点。可用性可以写在IPFS之上。他们正致力于FileCoin,以激励人们存储数据。人们通过让人们保存数据来上传胜利,并通过接收FileCoin来为他们的工作赢得主机。还有其他协议,如SaiCoinStorJMainSafe

结论:

您应该能够看到将图像从浏览器上传到IPFS的整体结构。存在一些缺点,例如可用性,速度和易用性。它还处于早期阶段,希望能够做更多工作来推动技术发展!

原创文章,作者:Haskell,如若转载,请注明出处:https://ipfsdrop.com/tech/jiangtuxiangshangchuandaoipfs/

发表评论

电子邮件地址不会被公开。 必填项已用*标注