如何在 axios-http 中发布对象数组答案

【问题标题】：How can I post an array of objects in axios-http如何在 axios-http 中发布对象数组
【发布时间】：2021-11-23 08:46:02
【问题描述】：

我正在使用 react-dropzone 上传 mp3 文件并使用元数据 npm 来获取文件的所有内容。将其发送到 axios.post() 时，我收到“Body Exceeded 1mb limit”的错误

这是我发送新数据的地方：

async function insertArtists(uploadedArtists, doneCallback) {
    // console.log(uploadedArtists); // [5]
    // console.log(artistsData);// []
    const originalArtists = [...artistsData];
    const newArtists = [...uploadedArtists, ...artistsData];
    try {
      setArtistsData(newArtists);
      const results = await axios.post(`${restUrl}/multi`, newArtists);
      console.log(results);
      if (doneCallback) {
        doneCallback();
      }
    } catch (error) {
      console.log("error thrown inside insertArtists", error);
      setArtistsData(originalArtists);
    }
  }

在这里https://github.com/vercel/next.js/issues/19684 找到了这个文档。但它没有解释如何添加其他参数。

我的拖放区：

 function Dropzone() {
  const { insertArtists } = useReqRest();
  const { getRootProps, getInputProps } = useDropzone({
    accept: "audio/*",
    onDrop: useCallback(async (acceptedFiles) => {
      const filesData = await Promise.all(
        acceptedFiles.map(async (file) => {
          let fileContents = {
            _id: uuidv4(),
            path: file.path,
            fileName: file.name,
            fileSize: file.size,
            fileType: file.type,
          };
          const meta = await musicMetadata.parseBlob(file);
          return { ...fileContents, ...meta.common };
        })
      );
      const fullDb = [...artists, ...filesData];
      insertArtists(fullDb);
    }),
  });
}

【问题讨论】：

标签： javascript reactjs rest axios next.js

【解决方案1】：

您可以通过添加config 来随意限制：

//pages/api/your_file.js
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '5mb',
    },
  },
}

如果您稍后在另一个处理程序中解析正文（例如，在处理文件时使用 FormData 处理程序），则完全禁用 bodyParser

export const config = {
    api: {
        bodyParser: false
    }
}

【讨论】：

你能告诉我如何将它传递给 axios.post()
刚刚将代码添加到我的 dropzone
我正在尝试使用 multer，但它没有连接我的导入或需要
我最初的问题是“如何在 axios-http 中发布一组对象”。我仍在努力回答这个问题
在 next.js 中，即使经过多次试验，我也无法让multer 为表单数据工作。可以改用另一个库formidable。 [npmjs.com/package/formidable]

【解决方案2】：

如果您的问题只是“Body Exceeded 1MB limit”，您可以在 API 文件末尾添加它，它会起作用

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}

如果您想在文件中添加所有详细信息，请考虑使用 FormData()，然后附加文件并将其作为请求正文发送

【讨论】：

【解决方案3】：

您需要设置自定义配置才能发送超过 1mb 的数据

export const config = {
 api: {
    bodyParser : {
      sizeLimit : '1mb' // change this
     },
 },
}

欲了解更多信息，请查看：https://nextjs.org/docs/api-routes/api-middlewares#custom-config

【讨论】：

什么鬼？我猜你问一个qsn只是为了打发时间。如果是，那么这不是正确的地方，伙计