通过下一个 js api 路由将文件上传到服务器答案

【问题标题】：Uploading file to a server via the next js api route通过下一个 js api 路由将文件上传到服务器
【发布时间】：2022-11-09 22:00:42
【问题描述】：

在将请求传输到服务器之前，我使用 Next.js api 作为中间件，我正在尝试发送带有文件的 multipart/formdata 请求，如果我直接从客户端调用后端 API 并使用 @ 987654322@ 对象，我编写了 Next API 来解析该表单数据，形成一个新的表单数据（这次是服务器端）并调用后端 API，但失败了。

这是代码：

import axios from "axios";
import formidable from "formidable";
import FormData from "form-data";
import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";
//
import BlogAPIs from "utils/apis/BlogAPIs";

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

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const session = await getSession({ req });

    const formData = new FormData();

    const fs = require("fs");

    const data: { fields: any; files: any } = await new Promise(
      (resolve, reject) => {
        const form = new formidable.IncomingForm();

        form.parse(req, (err: any, fields: any, files: any) => {
          if (err) reject({ err });
          resolve({ fields, files });
        });
      }
    );

    ["title", "content", "description", "thumbnail"].map((key) => {
      data.fields[key] && formData.append(key, data.fields[key]);
      data.files[key] &&
        formData.append(key, fs.createReadStream(data.files[key].filepath));
    });

    let config = {
      method: "post",
      url: `${process.env.API_BASE_URL}/blogs/`,
      headers: {
        Authorization: `Bearer ${session?.backendToken as string}`,
        ...formData.getHeaders(),
      },
      data: formData,
    };

    await axios(config);

    res.status(200).json("Succesfully added blog");
  } catch (error: any) {
    res.status(700).json(error.message);
  }
};

我似乎无法弄清楚我在这里做错了什么......

【问题讨论】：

嗨，你设法解决了这个问题吗？介意发布答案吗？
我记得在这个文件上更改了解析器，然后将多部分数据流式传输到后端，将在一段时间内发布代码

标签： reactjs typescript axios next.js multipartform-data

【解决方案1】：

这就是我能够实现它的方式：

import axios from "axios";
import formidable from "formidable";
import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";
import { processError } from "utils/apis/processError";
//

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

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const FormData = require("form-data");
    const concat = require("concat-stream");
    const fs = require("fs");

    const session = await getSession({ req });

    const data: { fields: any; files: any } = await new Promise(
      (resolve, reject) => {
        const form = new formidable.IncomingForm({
          keepExtensions: true,
        });

        form.parse(req, (err: any, fields: any, files: any) => {
          if (err) reject({ err });
          resolve({ fields, files });
        });
      }
    );

    const promise = new Promise<{ data: any; headers: any }>((resolve) => {
      const formData = new FormData();
      ["title", "content", "description", "tags"].map((key) => {
        data.fields[key] && formData.append(key, data.fields[key]);
      });

      data.files["thumbnail"] &&
        formData.append(
          "thumbnail",
          fs.createReadStream(data.files["thumbnail"].filepath),
          data.files["thumbnail"].originalFilename
        );

      formData.pipe(
        concat({ encoding: "buffer" }, (data: any) =>
          resolve({ data, headers: formData.getHeaders() })
        )
      );
    });

    promise
      .then(({ data, headers }) =>
        axios.post(`${process.env.API_BASE_URL}/blogs/`, data, {
          headers: {
            Authorization: `Bearer ${session?.backendToken as string}`,
            ...headers,
          },
        })
      )
      .catch((error) => {
        const errorMessage = processError(error);
        res.status(700).json(errorMessage);
      })
      .then((response) => {
        res.status(200).json({
          slug: response?.data.slug,
        });
      });
  } catch (error: any) {
    res.status(700).json(error.message);
  }
};

我使用流数据创建了一个承诺，然后将其发送到我的服务器。

【讨论】：