Multer文件上传报TypeError: Cannot read properties of undefined (reading '0')求因

我多次尝试使用Multer实现文件上传，但始终遇到以下错误：

TypeError: Cannot read properties of undefined (reading '0')

此前用完全相同的代码可以正常完成文件上传，请问这一错误的原因是什么？

相关代码 #

multer.middleware.js

import multer from 'multer';
import path from 'path';

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        return cb(null, 'public');
    },
    filename: (req, file, cb) => {
        let ext = path.extname(file.originalname);
        console.log(ext);
        return cb(null, Date.now()+ext);
    }
});

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

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

export {upload};

controller.js

import {Employee} from './employee.model.js';
import { uploadCloudinary } from './cloudinary.js';

//Add employee
const addEmployee = async (req, res) => {
    const { name, email, phone, dob } = req.body;
    if ([name, email, phone, dob].some(field => field?.trim() === '')) {
        return res.status(400).json({ message: 'All fields are required' });
    }

    const isExist = await Employee.findOne({ $or:[{email},{phone}] });
    if(isExist) {
        console.log("User with email or phone already exist! Try new one..");
        return res.status(409).json({ message: 'User with email or phone already exist! Try new one..' });
}
    const imagePath = req.files?.avatar[0]?.path;
    if (!imagePath) return res.status(400).json({ message: 'Avatar is required and path!' });

    const avatar = await uploadCloudinary(imagePath);
    if (!avatar) return res.status(400).json({ message: 'Avatar is required!' });

    const employee = await Employee.create({
        name,
        email,
        phone,
        dob,
        avatar: avatar?.url || '',
    });

};

export default { addEmployee};

router.js

import { Router } from "express";
import controller from "./employee.controller.js";
import {upload} from './multe.middileware.js'

const router = Router();
router.route("/add").post( 
    upload.fields([{
        name: 'avatar', maxCount: 1,
    }]) ,controller.addEmployee);

export default router;

已尝试的修改 #

我尝试将代码中的：

const imagePath = req.files?.avatar[0]?.path;

修改为：

const imagePath = req.files?.avatar?.path;

修改后TypeError报错消失，但文件仍无法上传，会收到"Avatar is required and path!"提示。我的疑问是：既然代码之前可以正常运行，现在为什么会出现这个异常？

内容的提问来源于stack exchange，提问作者Naim Islam