Express.js-Multer檔案過濾器不起作用

我想在將檔案上傳到服務器時過濾檔案，但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>

uj5u.com熱心網友回復：

你的filterMethod作品很好。這可以通過更改input accept="image/*"Then 中的值來檢查，當我們嘗試加載其他檔案時，ico否則jpg我們將收到錯誤：Only images are allowed。您的代碼需要一些調整，另外我使用了ejs

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”

標籤：

上一篇：瀏覽器顯示“CannotGET/api/posts/”而不是res.send('hello')中的“hello”

下一篇：為什么我的Nodejs應用程式看不到我的sqlite3資料庫列？