Express中访问文件上传formData

Question

如何访问 API 中的文件？

我阅读了其他解决方案，它们都需要 npm 包来解决这个问题。我想明白为什么我不能做香草。此外，答案很旧，建议使用现在与 Express 捆绑在一起的 body-parser。

我希望解决方案是 vanilla JS，以便更好地理解流程。

客户

async function uploadFile(file) {
    let formData = new FormData();
    formData.append("file", file);

    let res = await fetchPostFile("/api/files", formData);
}

获取

export async function fetchPostFile(url, formData) {
    try {
        let result = await (
            await fetch(url, {
                method: "POST",
                withCredentials: true,
                credentials: "include",
                headers: {
                    Authorization: localStorage.getItem("token"),
                    Accept: "application/json",
                    "Content-type": "multipart/form-data",
                },
                body: formData,
            })
        ).json();

        return result;
    } catch (err) {
        return err;
    }
}

api

router.post("/api/files", async function (req, res, next) {
    try {
        console.log(req.file);          // undefined
        console.log(req.files);         // undefined
        console.log(req.body);          // {}

    } catch (err) {
        next(err);
    } finally {
        req.connection.release();
    }
});

为什么req.body 是空的？请帮助我理解我做错了什么。

Answer 1

首先您需要使用multer 包来处理multipart/form-data 快递。您必须将其用作中间件来设置文件的字段名称。作为参数传递给single() 函数的名称必须与客户端附加的名称匹配。

const multer = require('multer')

router.post("/api/files", multer().single('file'), async function (req, res, next) {
  try {
      console.log(req.file)
  } catch (err) {
      next(err)
  } finally {
      req.connection.release()
  }
});