如何用NextJS上传文件，功能强大？

Question

我正在尝试利用 formidable 来访问文件并最终通过以下帖子将其发布到文件存储系统：在 next.js 中创建上传文件 api。我正在记录数据，但对输出感到困惑。当我尝试访问 data.files.resume.filepath 时，我得到了未定义。

数据如下：

{ fields: {}, files: { resume: [ [PersistentFile] ] } }

当我记录 data.files.resume 时，我得到这个显示文件路径：

[
  PersistentFile {
    _events: [Object: null prototype] { error: [Function (anonymous)] },
    _eventsCount: 1,
    _maxListeners: undefined,
    lastModifiedDate: 2023-02-09T01:59:50.924Z,
    filepath: 'C:\\Users\\Me\\AppData\\Local\\Temp\\21eef37a9191459ae49bb110f',
    newFilename: '21eef37a9191459ae49bb110f',
    originalFilename: 'thankyou.pdf',
    mimetype: 'application/pdf',
    hashAlgorithm: false,
    size: 57285,
    _writeStream: WriteStream {
      fd: null,
      path: 'C:\\Users\\Me\\AppData\\Local\\Temp\\21eef37a9191459ae49bb110f',
      flags: 'w',
      mode: 438,
      start: undefined,
      pos: undefined,
      bytesWritten: 57285,
      closed: false,
      _writableState: [WritableState],
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      [Symbol(kFs)]: [Object],
      [Symbol(kIsPerformingIO)]: false,
      [Symbol(kCapture)]: false
    },
    hash: null,
    [Symbol(kCapture)]: false
  }
]

当我记录 data.files.resume.filepath 时，我得到

undefined

前端表单提交：

const formData = new FormData();
formData.append("resume", resume);

const response = await fetch("/api/apply", {
    method: "POST",
    body: formData,
});

NextJS API：

import type { NextApiRequest, NextApiResponse } from "next";
import { IncomingForm } from "formidable";

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

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== "POST") {
    return;
  }

  // parse form with a Promise wrapper
  const data = await new Promise((resolve, reject) => {
    const form = new IncomingForm();
    form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });

  console.log("------");
  console.log(data);
  console.log("------");
  console.log(data.files.resume);
  console.log("------");
  console.log(data.files.resume.filepath); // this logs undefined

  res.status(200).json(data);
}

我遵循了这篇 StackOverflow 文章：在 next.js 中创建上传文件 api 并尝试记录每个步骤，但文件路径仍然未定义。非常感谢任何帮助或指导！

Answer 1

data.files.resume

是一个数组

使用

data.files.resume[0].filepath

代替或使用第一个值助手

import { firstValues } from 'formidable/src/helpers/firstValues.js';

Answer 2

兄弟你必须使用 data.files.resume[0] 因为简历是简历中的一个对象，所以你在索引“0”处有持久性 ，在持久性中，你有文件名、路径、原始名称等，使用数据你可以获取你的文件，我只是在寻找它，所以我决定在express js中实现它，以了解这里到底发生了什么，所以在nextjs我的项目中我投入了我的知识