axios 无法从Pinata(IPFS)获取数据

q3qa4bjr  于 2023-05-06  发布在  iOS
关注(0)|答案(1)|浏览(138)

我试图获取使用Pinata端点上传到IPFS的图像和数据,但我无法加载它,并且在LoadNFTs(这是函数名称)中无法显示,
下面是上传文件到ipfs的代码:

const uploadToIPFS = async (event) => {
        event.preventDefault();
      
        const file = event.target.files[0];
      
        if (typeof file !== 'undefined') {
          const formData = new FormData();
          formData.append('file', file);
      
          try {
            const resFile = await axios({
              method: 'post',
              url: 'https://api.pinata.cloud/pinning/pinFileToIPFS',
              data: formData,
              headers: {
                'pinata_api_key': REACT_APP_PINATA_API_KEY,
                'pinata_secret_api_key': REACT_APP_PINATA_API_SECRET,
                'Content-Type': 'multipart/form-data'
              }
            });
      
            const ImgHash = `ipfs://${resFile.data.IpfsHash}`;
            setAvatar(ImgHash);
            console.log("IPFS image upload succesfully")
          } catch (error) {
            console.log('Pinata IPFS image upload error: ', error);
          }
        }
      };

下面是MintProfile函数的代码:

const mintProfile = async (event) => {
        if (!avatar || !username) return;
        try {
          const formData = new FormData();
          formData.append('file', JSON.stringify({ avatar, username }));
          const resFile = await axios({
            method: 'post',
            url: 'https://api.pinata.cloud/pinning/pinJSONToIPFS',
            data: formData,
            headers: {
              'pinata_api_key':REACT_APP_PINATA_API_KEY,
              'pinata_secret_api_key':REACT_APP_PINATA_API_SECRET,
              'Content-Type': 'application/json',
            },
          });
          setLoading(true);
          const uri = `ipfs://${resFile.data.IpfsHash}`;
          console.log("error first")
          await (await contract.mint(uri)).wait();
          console.log("error second")
          loadMyNFTs();
        } catch (error) {
          console.log('Pinata IPFS URI upload error: ', error);
          window.alert('There was an error minting your NFT. Please try again later.');
        }
      };

在屏幕上它只是显示加载...
这是LoadMyNfts函数:

const loadMyNFTs = async () => {
        // Get users nft ids
        const results = await contract.getMyNfts();
        // Fetch metadata of each nft and add that to nft object.
        let nfts = await Promise.all(results.map(async i => {
            // get uri url of nft
            const uri = await contract.tokenURI(i)
            // fetch nft metadata
            const response = await fetch(uri)
            const metadata = await response.json()
            return ({
                id: i,
                username: metadata.username,
                avatar: metadata.avatar
            })
        }))
        setNfts(nfts)
        getProfile(nfts)
    }
snz8szmq

snz8szmq1#

当你从pinata获取时,你应该添加适当的头。from here
还有其他的错误已经向IPFS团队证明了,我们已经报告了,他们正在调查。同时我们建议使用'Accept':'text/plain'
你的代码应该是

const response = await fetch(uri, {
        headers: {
            Accept: "text/plain",
        },
    });

另一个问题是results.map。当你map数组时,回调的第一个参数是数组中的每个元素,回调的第二个参数是索引。应该是这样的

// since you are not using each element, we denote it by "_"
let nfts = await Promise.all(results.map(async (_, i) => {}

相关问题