javascript - 如何通过 javascript 代码将元数据 json 上传到 IPFS，以及如何通过前端以编程方式生成此 URL

Question

我开始研究基于 IPFS 的 NFT
项目流程是
1-安装IPFS
2-通过IPFS上传 Assets 照片并获取哈希
3- 通过这个哈希 url 创建元数据 json 文件

{
   "name": "NFT",
   "description": "This image shows the true nature of NFT.",
   "image": "https://ipfs.io/ipfs/QmUnMkaEB5FBMDhjPsEtLyHr4ShSAoHUrwqVryCeuMosNr"
}

4-将此json文件上传到IPFS并获取下一个哈希url

https://ipfs.io/ipfs/QmNSKewexhgY4rYwPoxPgNFN7BSjeiLXJif9q5FjeCrsmg

5-转到solidity并创建铸币功能并由MATIC Mumbai网络部署

 // SPDX-License-Identifier: MIT
pragma solidity ^0.8.6;
 
import "https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol";
import "https://github.com/0xcert/ethereum-erc721/src/contracts/ownership/ownable.sol";
 
contract newNFT is NFTokenMetadata, Ownable {
 
  constructor() {
    nftName = "Synth NFT";
    nftSymbol = "SYN";
  }
 
  function mint(address _to, uint256 _tokenId, string calldata _uri) external onlyOwner {
    super._mint(_to, _tokenId);
    super._setTokenUri(_tokenId, _uri);
  }
 
}

6-部署此合约和铸币后如下

7-去opensea测试网和收集，选择孟买并插入NFT所有者的地址
8 - 终于在测试网集合上看到 NFT
但我想在 javascript 中以编程方式制作这个
如何通过javascript将元数据json文件上传到IPFS并且已经是任何模板。源代码在哪里
以及如何从 react.js 前端和 web3.js 使用这个薄荷函数
有模板吗？我在哪里可以得到它
感谢您
我是 NFT 的初学者

Answer 1

在 javascript 中有很多方法可以做到这一点。
如果您想在单个文件上完成所有操作，首先您需要将文件部署到 IPFS。我建议使用为数不多的现有 API 之一来简化它，例如 Moralis、Nft.storage 或 Piñata。
使用 NFT.storage，您可以执行以下操作来部署到 IPFS:

const names = [
  "Test nft 1",
  "Test nft 2"
];

async function storeImage() {
  const content = await fs.readFile(
    path.resolve(__dirname, "../images/owl_articles.png")
  );

  const promisesToAwait: Promise<any>[] = [];

  names.forEach((name) => {
    promisesToAwait.push(
      client.store({
        name,
        description: `At vero eos et accusamus et iusto odio dignissimos.`,
        image: new File([content], "owl_articles.png", { type: "image/*" }),
      })
    );
  });

  const responses = await Promise.all(promisesToAwait);
  console.log(responses);
}

async function main() {
  await storeImage();
}

main();

给定数组 names，上面的代码将部署一个json文件数组到IPFS。 .他们都有相同的 image和 description为了示例的简单起见。
在moralis，你可以做类似的事情:

const jsonFile = new Moralis.File('file.json', {
        base64: btoa(JSON.stringify({ name, description, image: imageURL }))
});

上面的代码也将部署到 ipfs，但方式不同。
我现在不知道为什么，但是这种 Moralis 方法使用 ipfs://{hash} 部署它NFt.storage 方法将其部署为 ipfs://{hash}/metadata.json .
无论如何，在您使用上述任何过程之后，您必须将您的 NFT 作为参数传递 URI。
使用moralis，你可以这样做:

      const jsonIpfsLink = `ipfs://${(jsonFile as any).hash()}/metadata.json`;

      await Moralis.Web3.executeFunction({
        ...options,
        functionName: 'create',
        params: {
          _initialSupply: '10',
          _uri: jsonIpfsLink
        }
      });

上面的代码调用方法 create来自我的 ERC1155 合约。合约方式如下图:

    /**
     * @dev Creates a new token type and assigns _initialSupply msg.sender address
     * @param _initialSupply amount to supply the first owner
     * @param _uri URI for this token
     */
    function create(uint256 _initialSupply, string memory _uri) public {
        _uris[lastId.current()] = _uri;
        creators[lastId.current()] = msg.sender;
        _mint(msg.sender, lastId.current(), _initialSupply, "");
        emit ArticleMinted(msg.sender, _uri, lastId.current(), _initialSupply);
        lastId.increment();
    }

我的示例使用 ERC1155 模式，但在 ERC721 模式上应该非常相似。看起来您在契约(Contract)中都没有使用它们，但我强烈建议您这样做。
此外，Moralis 会让您的生活更轻松。我建议在你的前端项目中使用它。
我正在创建一个 NFT 市场，并且我几乎使用上面的代码来部署到 IPFS 和 mint。