Express.js - Multer 文件过滤器不工作

Question

我想在将文件上传到服务器时过滤文件，但是 Multer fileFilter 方法不起作用。

后端

destination 和 filename 方法也有效，但 fileFilter 无效。

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./public/images/");
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + path.extname(file.originalname));
  },
  fileFilter: function (req, file, callback) {
    console.log("Hello Word"); // This doesn't work either

    var ext = path.extname(file.originalname);
    if (!['.jpg', '.jpeg'].includes(ext)) {
      return callback(new Error('Only images are allowed'));
    }

    callback(null, true);
  },
});

app.use(
  multer({ storage: storage }).fields([
    { name: "logo", maxCount: 1 },
    { name: "favicon", maxCount: 1 },
  ])
);

前端

<form action="" method="post" enctype="multipart/form-data">
    <table>
        <tbody>
            <tr>
                <td>Logo</td>
                <td>
                    <input type="file" name="logo" accept="image/jpeg, image/jpg"/>
                </td>
            </tr>
            <tr>
                <td>Favicon</td>
                <td>
                    <input type="file" name="favicon" accept="image/x-icon" />
                </td>
            </tr>
        </tbody>
    </table>
</form>

Answer 1

您的 filterMethod 工作正常。这可以通过更改 input accept="image/*" 中的值来检查然后当我们尝试加载 ico 或 jpg 以外的文件时，我们将收到错误：Only images are allowed。您的代码需要一些调整，另外我使用了 ejs module，这是我的解决方案建议：

文件夹和文件项目结构：

app.js - 使用您的 fileFilter 代码。

const path = require("path");
const express = require("express");
const multer = require("multer");
const app = express();

app.use(express.static(path.join(__dirname, "public")));
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/views"));

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./images");
  },
  filename: function (req, file, cb) {
    console.log(req.file);

    cb(null, new Date().toUTCString() + " - " + file.originalname);
  },
});

const upload = multer({
  storage: storage,
  fileFilter: function (req, file, callback) {
    console.log("Hello, World! Works fine;-)");

    var ext = path.extname(file.originalname);
    if (![".jpg", ".ico"].includes(ext)) {
      return callback(new Error("Only images are allowed"));
    }

    callback(null, true);
  },
});

app.post(
  "/post",
  upload.fields([
    { name: "logo", maxCount: 1 },
    { name: "favicon", maxCount: 1 },
  ]),
  (req, res, next) => {
    const files = req.files;
    if (!files) {
      const error = new Error("Please upload a file");
      error.httpStatusCode = 400;
      return next(error);
    }
    res.send(files);
    console.log("Success", req.files);
  }
);

app.get("/post", (req, res) => {
  res.render("post");
});

app.listen(3000, () => {
  console.log(`Example app listening at http://localhost:3000/post`);
})

post.ejs - 使用您的前端 form 代码和我的附加 input submit:

<form action="" method="post" enctype="multipart/form-data">
  <table>
    <tbody>
      <tr>
        <td>Logo</td>
        <td>
          <input type="file" name="logo" accept="image/jpeg, image/jpg" />
        </td>
      </tr>
      <tr>
        <td>Favicon</td>
        <td>
          <input type="file" name="favicon" accept="image/x-icon" />
        </td>
      </tr>
    </tbody>
  </table>
  <input class="submit" type="submit" value="Upload File" />
</form>

http://localhost:3000/post 在浏览器中路由输出：

在 submit - Upload File 之后输出 。 fields name logo 和 favicon.

中指定的文件

在 server side 和 images 文件夹中输出：

测试：node v16.13.0 "ejs": "^3.1.6","express": "^4.17.2","multer": "^1.4.4"

Express.js - Multer 文件过滤器不工作

Express.js - Multer File Filter Not Working

javascript

node.js

express

multer