基于Metaplex实现点击按钮创建并上传NFT至Candy Machine

前置依赖 #

先确保项目安装必要依赖：

npm install @metaplex-foundation/js @solana/web3.js

同时要确保用户已通过Phantom等钱包连接你的应用，因为上传操作需要用户签名授权。

核心实现步骤 #

1. 初始化Metaplex实例 #

在前端代码中初始化Metaplex，绑定Solana网络和用户钱包：

import { Metaplex, walletIdentity, bundlrStorage } from '@metaplex-foundation/js';
import { Connection, PublicKey, clusterApiUrl } from '@solana/web3.js';

// 连接Solana Devnet（上线时切换为mainnet-beta）
const connection = new Connection(clusterApiUrl('devnet'));
// 获取已连接的用户钱包（假设已通过钱包适配器完成连接）
const userWallet = window.solana;

// 初始化Metaplex，配置Bundlr存储（用于上传到Arweave）
const metaplex = Metaplex.make(connection)
  .use(walletIdentity(userWallet))
  .use(bundlrStorage({
    address: 'https://devnet.bundlr.network',
    providerUrl: clusterApiUrl('devnet'),
    timeout: 60000,
  }));

2. 编写上传逻辑函数 #

该函数负责读取用户选择的NFT文件与对应metadata，上传到Arweave后添加到Candy Machine：

async function uploadToCandyMachine(candyMachineAddress) {
  try {
    // 1. 让用户选择本地文件夹（包含NFT作品和对应metadata文件）
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.webkitdirectory = true;
    fileInput.click();

    fileInput.onchange = async () => {
      const files = Array.from(fileInput.files);
      // 按文件名匹配NFT文件与metadata（例如：1.png 对应 1.json）
      const filePairs = files.reduce((pairs, file) => {
        const baseName = file.name.split('.')[0];
        if (!pairs[baseName]) pairs[baseName] = {};
        if (file.type.includes('image') || file.type.includes('video')) {
          pairs[baseName].media = file;
        } else if (file.name.endsWith('.json')) {
          pairs[baseName].metadata = file;
        }
        return pairs;
      }, {});

      // 遍历所有文件对，逐一上传
      for (const [_, pair] of Object.entries(filePairs)) {
        if (!pair.media || !pair.metadata) continue;

        // 2. 上传NFT媒体文件到Arweave
        const mediaUri = await metaplex.storage().upload(pair.media);

        // 3. 读取并更新metadata
        const metadataJson = await JSON.parse(await pair.metadata.text());
        metadataJson.image = mediaUri;
        metadataJson.properties.files = [{
          uri: mediaUri,
          type: pair.media.type,
        }];

        // 4. 上传更新后的metadata到Arweave
        const metadataUri = await metaplex.storage().upload(JSON.stringify(metadataJson));

        // 5. 将metadata URI插入Candy Machine
        const candyMachine = await metaplex.candyMachines().findByAddress({
          address: new PublicKey(candyMachineAddress),
        });

        await metaplex.candyMachines().insertItems({
          candyMachine,
          items: [{
            uri: metadataUri,
            name: metadataJson.name,
            sellerFeeBasisPoints: metadataJson.seller_fee_basis_points
          }],
        });
      }

      alert('所有NFT上传完成！');
    };
  } catch (error) {
    console.error('上传失败:', error);
    alert('上传出错，请检查控制台日志');
  }
}

3. 绑定按钮点击事件 #

在页面中添加按钮，触发上传函数：

<button onclick="uploadToCandyMachine('你的Candy Machine公钥')">上传NFT到Candy Machine</button>

重要注意事项 #

• 钱包权限：必须确保用户已授权你的应用访问钱包，否则无法完成签名交易
• Candy Machine状态：目标Candy Machine必须处于可添加项目的状态（未关闭、有剩余插槽）
• 费用：上传需要支付Solana Gas费和Arweave存储费，确保用户钱包有足够SOL
• 文件匹配：确保NFT文件和metadata文件名前缀一致（如nft-01.png对应nft-01.json），否则无法正确配对

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