Formable to formData nodejs nextjs

tcomlyy6  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(163)

我尝试上传图像使用nextjs和后端使用强大的,但混淆转换成formData的结果,使用未来13页。
pages/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);
      }
    });

}


对此有什么解决办法吗?

rfbsl7qr

rfbsl7qr1#

我认为你应该像这样将'Content-type'添加到req头中:

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/
希望这些对你有帮助

相关问题