如何在事件中索引新文件？FileList赋值报错的解决办法

这个报错的原因很明确：event.target.files返回的是一个只读的FileList对象，它的索引属性并没有提供setter方法，所以你没法直接通过event.target.files[0] = newFile这种方式修改它的元素。

下面给你几个可行的解决思路，你可以根据自己的实际需求选择：

1. 替换的文件列表（最常用场景） #

如果你是想更新<input type="file">控件里的文件内容，可以用DataTransfer对象创建一个可写的新FileList，再赋值给input的files属性：

// 假设你已经有了目标File对象newFile
const dataTransfer = new DataTransfer();
// 将新文件添加到DataTransfer中
dataTransfer.items.add(newFile);
// 把新的FileList赋值给input元素
event.target.files = dataTransfer.files;

如果需要保留原有的其他文件，只替换某一个元素，可以先把原FileList转成数组修改，再转回FileList：

// 把原FileList转为可修改的数组
const filesArray = Array.from(event.target.files);
// 替换数组里的目标元素
filesArray[0] = newFile;
// 创建新的DataTransfer并添加所有文件
const dataTransfer = new DataTransfer();
filesArray.forEach(file => dataTransfer.items.add(file));
// 赋值回input控件
event.target.files = dataTransfer.files;

2. 直接用变量替代（无需修改原input） #

如果只是后续业务逻辑需要用到这个新文件，不需要更新input控件的显示状态，那最简单的方式就是把newFile存到变量里，后续用这个变量代替event.target.files[0]即可：

// 用变量存储新文件，替代原索引位置的文件
let processedFile = newFile;
// 后续所有处理文件的逻辑都使用processedFile
console.log(processedFile.name);

注意事项 #

• DataTransfer是现代浏览器普遍支持的API，Chrome、Firefox、Edge等都能正常使用，无需担心兼容性（IE浏览器不支持，但目前已基本退出主流场景）。
• 少数特殊场景下浏览器会限制对input的files属性赋值（比如跨域操作），但常规的同域业务操作都不会有问题。

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