如何将多个上传输入的File文件统一存入同一FileList的0索引位置

核心逻辑 #

原生FileList是浏览器提供的只读类数组对象，无法直接修改内部元素，我们可以通过DataTransfer API构造符合要求的新FileList，再赋值到数组的第一个索引位置。

完整代码 #

manyImage = []
selectImage(event) {
  // 收集所有已选+本次新增的文件
  const collectedFiles = []
  // 先提取已合并的FileList中的文件
  if (this.manyImage[0]) {
    collectedFiles.push(...Array.from(this.manyImage[0]))
  }
  // 追加本次选择的新文件
  if (event.target.files.length > 0) {
    collectedFiles.push(...Array.from(event.target.files))
  }
  // 构造新的标准FileList
  const dataTransfer = new DataTransfer()
  collectedFiles.forEach(file => dataTransfer.items.add(file))
  // 覆盖数组第一个位置的FileList
  this.manyImage[0] = dataTransfer.files
  console.log(this.manyImage)
}

注意事项 #

• 生成的dataTransfer.files是标准FileList对象，和input标签返回的FileList格式完全一致，可直接用于后续上传逻辑
• DataTransfer API兼容所有现代浏览器、移动端浏览器，不支持IE浏览器。如果需要兼容IE，可以直接把所有文件存在普通File数组中，绝大多数上传组件都支持直接传入File数组完成上传。

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