create-next-app创建的Next.js项目中FileList调用forEach报错怎么办？

差异原因 #

e.target.files 属于FileList类数组对象，原生ECMAScript标准中FileList原型链上并未内置forEach方法。两个项目表现不一致的核心原因是环境polyfill差异：

• 从CRA迁移的旧Next.js项目中，要么CRA默认内置的全局polyfill（如core-js相关实现）补全了FileList的forEach方法，要么项目内引入的第三方依赖（上传组件、工具库等）已全局为FileList原型挂载了forEach实现。
• 新使用create-next-app搭建的项目，Next.js 13及以上版本默认采用按需polyfill策略，不会默认注入非标准的全局原型方法，因此调用forEach会报错。

解决方法 #

推荐优先采用无副作用的转数组方案，不需要修改全局原型：

方案1：转换为普通数组后遍历 #

直接用Array.from或者扩展运算符把FileList转成真实数组，再调用forEach即可，修改后代码如下：

const selectImageHandle = (e) => {
    let arrayImages = [];
    // 转成数组后调用forEach
    Array.from(e.target.files).forEach(file => {
        arrayImages.push(file);
    })
    // 简化写法：无需遍历push，直接转换得到File数组
    // const arrayImages = Array.from(e.target.files)
}

方案2：全局补全FileList的forEach方法（不推荐） #

如果项目内大量代码直接调用了FileList.forEach，不想逐个修改，可以在项目入口文件（如根layout.tsx、_app.tsx）中添加全局原型补丁：

// 仅在FileList未定义forEach时添加补丁
if (typeof FileList !== 'undefined' && !FileList.prototype.forEach) {
    FileList.prototype.forEach = function(callback, thisArg) {
        thisArg = thisArg || globalThis;
        for (let i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

该方案会修改原生原型，存在和第三方依赖冲突的风险，非必要不使用。

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