如何修复（Multer）文件上传不起作用？

Question

我想从我的电脑上传图像到服务器文件系统。 我正在使用

Multer

来处理文件上传，但它根本不起作用，就像它不存在一样。

首先是客户端代码（React JS），我使用的是常规形式

<Form title="Upload" onSubmit={(e: React.SyntheticEvent) => handleSubmit(e)} encType>
  ...some input fields
  <FileInput name="image" label="Image" setter={setData} />
</Form>

encType

组件中的

From

属性只是一个布尔值，用于将

<form>

enctype

设置为

"multipart/form-data"

<form method='POST' autoComplete='off' encType={props.encType ? "multipart/form-data" : undefined} onSubmit={props.onSubmit}>
  <div className='form-header'>
    <span>{props.title}</span>
  </div>
  <div className='form-body'>
    {props.children}
  </div>
  <div className="form-footer">
    <Button type="submit" label="Submit" primary />
  </div>
</form>

我正在使用

Fetch API

来处理表单提交

async function handleSubmit(e: React.SyntheticEvent): Promise<Promise<void>> {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await fetch("http://localhost:4000/devices/create", { method: "POST", headers: { "Accept": "application/json", "Content-Type": "application/json" }, body: JSON.stringify(data), cache: "no-store" });
      await response.json().then((data) => setMessage((prev: any) => prev = data));
    } catch (error) {
      console.error("Request error", error);
    }
    setLoading(false);
}

现在在服务器（Node + Express）中，这是我调用表单提交的端点，我提供了

uploadFile

中间件在

create

函数之前调用

router.post('/create', uploadFile.single("image"), create);

这是中间件

import multer from "multer";
import path from "path";

const storage = multer.diskStorage({
    destination: (req, file, callback) => callback(null, "src/uploads/"),
    filename: (req, file, callback) => callback(null, Date.now() + path.extname(file.originalname)),
});

const uploadFile = multer({ storage });

export default uploadFile;

现在，当我发出 API 请求时，几乎什么都没有发生，就像没有中间件一样。 当我使用开发工具检查它时，没有记录任何错误，文件系统没有任何变化，请求本身也没有错误。