使用Pinata在IPFS上存储NFT图片的实践

花花花1

于 2024-08-07 22:52:18 发布

阅读量2.9k

点赞数 69

分类专栏：区块链学习笔记文章标签： IPFS NFT 分布式存储区块链 web3 去中心化

本文链接：https://blog.csdn.net/Huahua_1223/article/details/141001394

版权

区块链学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

前言
一、什么是IPFS？
二、为什么NFT需要IPFS？
三、 Pinata：IPFS上的存储解决方案
四、实践：使用Pinata存储NFT图片
总结

前言

随着区块链技术的快速发展，NFT（非同质化代币）在数字艺术、游戏和收藏品等领域变得越来越流行。一个关键的问题是如何安全、高效地存储这些NFT的元数据和图片。IPFS（InterPlanetary File System，星际文件系统）提供了一种分布式存储解决方案，能够有效解决这一问题。本文将介绍IPFS及其在NFT存储中的应用，并具体讲解如何使用Pinata平台🚪在IPFS上存储图片。

在这里插入图片描述

一、什么是IPFS？

IPFS是一种分布式文件存储和共享系统，旨在创建一个更快、更安全、更开放的互联网。它通过内容寻址的方式，使文件可以永久存储，并且不依赖于某个特定的服务器。IPFS的关键特点包括：

分布式存储：IPFS采用P2P网络结构，文件存储在多个节点上，提高了数据的可靠性和抗审查能力。
内容寻址：文件在上传到IPFS时会生成一个唯一的加密哈希值，通过这个哈希值可以直接找到并访问该文件。
去中心化：IPFS去除了中心化服务器的需求，文件可以分布在全球各地的不同节点上，避免了单点故障。

二、为什么NFT需要IPFS？

在区块链上存储NFT时，通常只存储一个唯一的标识符和少量数据，而更详细的元数据（如图片、音频、视频等）存储在IPFS上。原因如下：

成本效益：区块链上的存储成本非常高，而IPFS提供了一种更经济的存储方式。
数据完整性：IPFS通过内容寻址确保文件的不可变性和完整性，任何对文件内容的修改都会生成一个新的哈希值，保证数据的原始性。
抗审查和可靠性：IPFS的分布式存储方式避免了中心化服务器的单点故障和审查问题。

三、 Pinata：IPFS上的存储解决方案

Pinata是一个易于使用的IPFS文件管理平台，提供了强大的API接口，使得在IPFS上上传和管理文件变得更加简单和高效。Pinata的主要功能包括：

文件上传和管理：通过Pinata可以方便地将文件上传到IPFS，并管理这些文件。
API支持：Pinata提供了丰富的API接口，方便开发者在应用中集成IPFS存储功能。
可靠的网关服务：Pinata提供了稳定的IPFS网关服务，确保文件可以快速、可靠地被访问。

四、实践：使用Pinata存储NFT图片

下面我们具体讲解如何使用Pinata在IPFS上存储NFT图片。

1. 注册

首先，在Pinata官网🚪注册一个账户，并获取API密钥，红框为注册按钮
在这里插入图片描述

用电脑注册的时候，最好是直接在你的电脑里再开一个页面为你的邮箱页面去接收验证码，用手机接收验证码的话，可能会跳转失败（亲身经历😥）

在这里插入图片描述

2. 获取API密钥与网关

接收完验证码就直接会跳转进入到个人主页了，进入“API Keys”页面，创建一个新的API密钥Generate API Key就可以了
在这里插入图片描述
输入你想给这个API密钥的命名，勾选上admin，其它的选项留待以后去研究，然后直接Generate API Key就可以了

随后会出先三个信息，注意保管好前面两个，之后要用到的

再进入到Gateways页面获取网关，网关是用来访问存储ipfs图片要用到的，要访问存储的ipfs就是https://你的网关/ipfs/存储图片得到的cid，例如我的网关是这个aqua-famous-koala-370.mypinata.cloud，那么我访问图片就是通过https://aqua-famous-koala-370.mypinata.cloud/ipfs/xxx
在这里插入图片描述

3. 上传图片到IPFS

通过简单的POST请求即可实现上传IPFS，首先需要刚才获得的API Key和API Secret，请求URL路径是https://api.pinata.cloud/pinning/pinFileToIPFS，并且请求头为pinata_api_key和pinata_secret_api_key，请求体为要上传的图片或者文档在这里插入图片描述
最后POST请求返回的结果里会包含IpfsHash也就是要获得的cid

以下为实现简单实现IPFS上传的一个完整核心代码，其中要替换为你自己的API密钥以及网关

<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload to Pinata</title>
</head>
<body>
    <h1>Upload File to Pinata</h1>
    <form id="uploadForm">
        <input type="file" id="fileInput" required>
        <button type="submit">Upload</button>
    </form>
    <div id="result"></div>

    <script src="script.js"></script>
</body>
</html>

// script.js
    document.getElementById('uploadForm').addEventListener('submit', async (event) => {
        event.preventDefault();
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];
    
        if (!file) {
            alert('Please select a file.');
            return;
        }
    
        // Create a FormData object and append the file
        const formData = new FormData();
        formData.append('file', file);
    
        // Pinata API credentials (replace with your actual API key and secret)
        const pinataApiKey = '自己的apikey';
        const pinataSecretApiKey = '自己的secret';
    
        try {
            const response = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
                method: 'POST',
                headers: {
                    'pinata_api_key': pinataApiKey,
                    'pinata_secret_api_key': pinataSecretApiKey
                },
                body: formData
            });
    
            if (!response.ok) {
                throw new Error(`Error: ${response.statusText}`);
            }
    
            const data = await response.json();
            const cid = data.IpfsHash;
    
            // Display the result
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `
                <p>File uploaded successfully!</p>
                <p>CID: ${cid}</p>
                <p><a href="https://自己的网关/ipfs/${cid}" target="_blank">View File</a></p>
                <p><a href="https://自己的网关/ipfs/${cid}" download>Download File</a></p>
            `;
        } catch (error) {
            console.error('Error uploading file:', error);
            alert('Error uploading file. Please try again.');
        }
    });

打开页面可以上传一份图片
在这里插入图片描述
点击View File即可查看上传的文件是什么

如果想要在区块链中加入这个IPFS，只需要在智能合约中定义一个string类型的字符串，也就是直接将cid给存入到智能合约中，这样访问的时候直接在网关后拼接存储的cid，大大减少了文件上链的费用，同时保持了数据的完整性和可访问性

在这里插入图片描述

总结

通过本文，我们详细介绍了IPFS及其在NFT存储中的重要性，并通过具体示例演示了如何使用Pinata平台在IPFS上存储图片。从注册账户、获取API密钥到实际上传文件，我们逐步讲解了每一个关键步骤。IPFS提供了去中心化、内容寻址和分布式存储的优势，使得NFT元数据和图片存储更加安全和高效。希望这篇文章能帮助你更好地理解和使用IPFS来存储NFT图片。如果你有任何疑问或建议，欢迎在评论区留言讨论🌹