如何使用JavaScript上传元数据JSON到IPFS并在前端程序化Mint NFT

前置环境准备 #

首先初始化React项目并安装所需依赖：

• 项目基础：用create-react-app初始化React前端项目
• web3相关：ethers.js（也可替换为web3.js）、@metamask/detect-provider用于检测浏览器钱包
• IPFS相关：ipfs-http-client用于调用IPFS节点上传文件
• 工具依赖：buffer用于处理文件格式转换

步骤1：实现钱包连接与网络切换 #

首先完成MetaMask钱包连接，自动切换到Polygon Mumbai测试网，示例代码如下：

import { ethers } from "ethers";
import detectEthereumProvider from '@metamask/detect-provider';

const connectWallet = async () => {
  const provider = await detectEthereumProvider();
  if (!provider) {
    alert("请先安装MetaMask钱包");
    return;
  }
  // 请求账号授权
  const accounts = await provider.request({ method: 'eth_requestAccounts' });
  // 切换到Mumbai测试网
  try {
    await provider.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: '0x13881' }],
    });
  } catch (switchError) {
    // 未添加Mumbai网络时自动添加
    if (switchError.code === 4902) {
      await provider.request({
        method: 'wallet_addEthereumChain',
        params: [
          {
            chainId: '0x13881',
            chainName: 'Polygon Mumbai Testnet',
            rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
            nativeCurrency: {
              name: 'MATIC',
              symbol: 'MATIC',
              decimals: 18
            },
            blockExplorerUrls: ['https://mumbai.polygonscan.com/']
          },
        ],
      });
    }
  }
  const ethersProvider = new ethers.providers.Web3Provider(provider);
  const signer = ethersProvider.getSigner();
  return { signer, account: accounts[0] };
}

步骤2：实现资源文件上传IPFS #

无需本地安装IPFS节点，直接调用公共IPFS节点完成文件上传，示例代码如下：

import { create } from 'ipfs-http-client';

// 初始化IPFS客户端，也可替换为本地节点、自建节点
const ipfs = create({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https'
});

// 上传NFT图片到IPFS
const uploadImageToIPFS = async (file) => {
  const result = await ipfs.add(file);
  return `https://ipfs.io/ipfs/${result.path}`;
}

// 生成metadata并上传到IPFS
const uploadMetadataToIPFS = async (imageUrl, nftName, nftDesc) => {
  const metadata = {
    name: nftName,
    description: nftDesc,
    image: imageUrl
  };
  const result = await ipfs.add(JSON.stringify(metadata));
  return `https://ipfs.io/ipfs/${result.path}`;
}

步骤3：调用智能合约完成铸造 #

提前准备好已部署的合约地址、合约ABI，调用mint方法完成NFT铸造，示例代码如下：

// 替换为你部署的合约ABI，可直接从Remix、Hardhat编译结果中复制
const NFT_CONTRACT_ABI = [
  "function mint(address _to, uint256 _tokenId, string calldata _uri) external onlyOwner"
];
// 替换为你部署的合约地址
const NFT_CONTRACT_ADDRESS = "你的合约实际部署地址";

const mintNFT = async (signer, receiverAddress, tokenId, metadataUri) => {
  const nftContract = new ethers.Contract(NFT_CONTRACT_ADDRESS, NFT_CONTRACT_ABI, signer);
  // 发起铸造交易
  const tx = await nftContract.mint(receiverAddress, tokenId, metadataUri);
  // 等待交易上链确认
  await tx.wait();
  return tx.hash;
}

步骤4：结果验证 #

交易确认后，即可前往OpenSea测试网选择Mumbai网络，输入持有者地址查看铸造完成的NFT。也可在前端调用合约的tokenURI方法，验证元数据是否成功上链。

注意事项 #

• 提前准备Mumbai测试网MATIC代币支付gas费
• tokenId需要保证全局唯一，不可重复使用，可提前调用合约totalSupply方法获取当前总供应量作为新tokenId
• 如果你部署的合约设置了onlyOwner修饰符，只有合约部署者账号可以调用mint方法，如需开放给所有用户铸造可删除该修饰符
• 公共IPFS网关可能存在访问延迟，可替换为自建IPFS网关提升稳定性

内容的提问来源于stack exchange，提问作者user16945874