将文件上传到 IPFS 时出错。我正在使用 pinFileToIPFS 网关

Question

我正在尝试将图像上传到IPFS，该图像是由用户在前端选择的。我正在将图像存储在状态挂钩中并将其传递到表单数据。

根据 pinata 文档，我还在表单数据中添加了文件名和 pinata 选项。

我正在使用 axios 向 Pinata 服务器执行获取请求。 “handleFileUpload”函数用于处理将文件上传到 Pinata。

但是当我向服务器发出 post 请求时，我收到了 Bad-Request 错误（详细错误如下）。

下面我提供了完整的代码，该代码来自我的一个名为 create 的 React 组件。 我的完整代码如下：

import { useState } from 'react';
import { Row, Form, Button } from 'react-bootstrap';
import { create as ipfsHttpClient } from 'ipfs-http-client';
import axios from 'axios';
import FormData from 'form-data';

const Create = ({ marketplace, nft }) => {
  const [image, setImage] = useState();
  const [price, setPrice] = useState(null);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  let ImgHash;
  const JWT = 'JWT_here'

  const handleFileUpload = async(e) => 
  {
    e.preventDefault();
    if(image)
    {
      const formData = new FormData();
      formData.append("file", image[0]);

      const pinataMetadata = JSON.stringify({
        name: name,
      });
      formData.append('pinataMetadata', pinataMetadata);

      const pinataOptions = JSON.stringify({
         cidVersion: 0,
      })
      formData.append('pinataOptions', pinataOptions);

      try
      {
        const res = await axios.post("https://api.pinata.cloud/pinning/pinFileToIPFS", formData, 
        {
          maxBodyLength: "Infinity",
          headers: {
            'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
            Authorization: JWT,
            path: 'somename'
          }
        });
        console.log(res.data);
        ImgHash = `ipfs://${res.data.IpfsHash}`;
      } 
      catch (error) 
      {
        console.error('Error uploading file:', error);
      }
    }
  }

  return (
    <div className="container-fluid mt-5">
      <div className="row">
        <main role="main" className="col-lg-12 mx-auto" style={{ maxWidth: '1000px' }}>
          <div className="content mx-auto">
            <Row className="g-4">
              <Form.Control
                type="file"
                required
                name="file"
                onChange={(e) => setImage(e.target.files[0])}
              />
              <Form.Control onChange={(e) => setName(e.target.value)} size="lg" required type="text" placeholder="Name" />
              <Form.Control onChange={(e) => setDescription(e.target.value)} size="lg" required as="textarea" placeholder="Description" />
              <Form.Control onChange={(e) => setPrice(e.target.value)} size="lg" required type="number" placeholder="Price in ETH" />
              <div className="d-grid px-0">
                <Button onClick={handleFileUpload} variant="primary" size="lg">
                  Create & List NFT!
                </Button>
              </div>
            </Row>
          </div>
        </main>
      </div>
    </div>
  );
}

export default Create

我尝试查看文档来找出错误，但无法找出确切的原因。

以下是我在尝试发出发布请求时收到的错误消息：

AxiosError {消息：'请求失败，状态代码400'，名称：'AxiosError'，代码：'ERR_BAD_REQUEST'，配置：{...}，请求：XMLHttpRequest，...} 代码 : “ERR_BAD_REQUEST” 配置 : {过渡：{…}，适配器：数组（2），transformRequest：数组（1），transformResponse：数组（1），超时：0，…} 信息 : “请求失败，状态码 400” 姓名 : “Axios错误” 要求 : XMLHttpRequest {onreadystatechange：null，readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload，...} 回复 : {数据：{...}，状态：400，statusText：''，标题：AxiosHeaders，配置：{...}，...} 堆 : “AxiosError：请求失败，状态代码 400 解决时（http://localhost:5173/node_modules/.vite/deps/axios.js?v=8be9dcc7:3371:12） 在 XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=8be9dcc7:3611:7)” [[原型]] : 错误

Answer 1

400 状态代码表示端点错误或者您在请求中发送无效或丢失的参数。但您的端点 url 是正确的，因此您可能设置了错误的参数。 来自文档

此端点将接受单个文件或单个目录。这 请求必须包含有效负载的读取流，以便 API 接受它。

示例 来自文档

const axios = require('axios')
const FormData = require('form-data')
const fs = require('fs')
const JWT = 'Bearer PASTE_YOUR_PINATA_JWT'

const pinFileToIPFS = async () => {
    const formData = new FormData();
    const src = "path/to/file.png";
    
    const file = fs.createReadStream(src)
    formData.append('file', file)
    
    const pinataMetadata = JSON.stringify({
      name: 'File name',
    });
    formData.append('pinataMetadata', pinataMetadata);

    try{
      const res = await axios.post("https://api.pinata.cloud/pinning/pinFileToIPFS", formData, {
        maxBodyLength: "Infinity",
        headers: {
          'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
          Authorization: JWT
        }
      });
      console.log(res.data);
    } catch (error) {
      console.log(error);
    }
}