javascript - 无法在节点 js 中使用 multer 获取文件（req.file 未定义）

Question

我使用带有节点的multer包并做出反应，我将文件发送到节点js后端，但总是未定义..这是反应

<div className="file-field input-field">
 <div className="btn">
  <span>File</span>
  <input
   type="file"
   name="image"
   id="image"
   onChange={changedImageUpload}
  />
 </div>
 <div className="file-path-wrapper">
  <input className="file-path validate" />
 </div>
</div>

那就是那里的 onChange 文件处理方法，我只得到第一个console.log，但第二个和第三个没有打印

const changedImageUpload = (e) => {
  const file = e.target.files[0];
  const formData = new FormData();
  formData.append("image", file);
  console.log(formData, file);
  try {
    const config = {
      Headers: {
        "Content-Type": "multipart/form-data",
      },
    };
    axios
      .post("/uploads", formData, config)
      .then((res) => {
        console.log(res.data);
      })
     .catch((err) => {
       console.log(err);
     });
 } catch (err) {
   console.log(err);
 }
};

及其节点代码和多重配置

import express from "express";
import multer from "multer";
const route = express.Router();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "images");
  },
  filename: (req, file, cb) => {
    cb(
      null,
      new Date().toISOString().replace(/[\/\\:]/g, "_") + file.originalname
    );
  },
});

const multerFilter = (req, file, cb) => {
  if (
    file.mimetype === "image/png" ||
    file.mimetype === "image/jpg" ||
    file.mimetype === "image/jpeg"
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

const upload = multer({ storage: storage, fileFilter: multerFilter });

route.post("/uploads", upload.single("image"), (req, res) => {
  try {
    // res.send(`/${req.file.path}`);
    console.log(req.file);
  } catch (err) {
    console.log(err);
  }
});

并导入app.js

import uploadRoutes from "./Routes/uploadRoutes.js";
app.use(uploadRoutes);

const __dirname = path.resolve();
app.use("/images", express.static(path.join(__dirname, "/images")));

所以在打印 formData 我总是得到空对象，如果我打印req.file我在节点 js 中得到一个未定义

标签： javascriptnode.jsreactjsexpressmulter

Answer 1

你的过滤功能是错误的。您正在将其与不是真正的MIME 类型mimeType之类的东西进行比较，因此您的文件总是被过滤掉。jpg

您需要与image/pngand进行比较image/jpeg。