IPFS 浏览器端传图片，并显示 |
您所在的位置：网站首页 › ipfs–fil下载 › IPFS 浏览器端传图片，并显示 |
IPFS 浏览器端传图片，并显示
|
大部分的开发者想要整合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 JavaScript file upload 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 } Upload photo Upload1.创建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 |
【本文地址】
今日新闻 |
推荐新闻 |