强大的formDatanodejsnextjs

Question

我尝试使用 nextjs 上传图像，后端使用强大的，但为了混淆将结果转换为 formData ，使用下一个 13 页。

页面/client.tsx

   const body = new FormData();
        body.append('file', File);
        console.log(body.getAll('file'));
        fetch('/api/upload-image', {
          method: 'POST',
          body,
        })
          .then(res => console.log(res))
          .catch(err => console.log(err));

pages/api/upload-image.tsx

export default async function handler(req: NextApiRequest,res: NextApiResponse){

    const form = new Formidable({ multiples: true });
    const data: Promise<{ fields: formidable.Fields; files: formidable.Files }> =
    new Promise((resolve, reject) => {
      form.parse(req, (error, fields, files) => {
        if (error) reject(error);
        resolve({ fields, files });
      });
    });
    data.then(async ({ fields, files }) => {
      const body = new FormData();
      body.append('file', files);
      try {
        const fetchData = await fetch(`https://example.tco`, {
          method: 'POST',
          body,
          headers: new Headers({
            Authorization: `dfghgjghdgsfa345`,
          }),
        });
        const response = await fetchData.json();
        res.send({ ...response });
      } catch (err) {
        res.status(500).send(err);
      }
    });

}

有什么解决办法吗？

Answer 1

我认为你应该将“内容类型”添加到请求标头中，如下所示：

 const body = new FormData();
        body.append('file', File);
        console.log(body.getAll('file'));
        fetch('/api/upload-image', {
          method: 'POST',
          body,
          Content-Type:'multipart/form-data',
        })
          .then(res => console.log(res))
          .catch(err => console.log(err));

或者您可以尝试使用 axios ，如本教程所示： https://www.bezkoder.com/upload-image-react-typescript/

希望这些对你有帮助