ES6中使用Array.from和forEach处理多文件上传生成目标数组的问题

问题根因 #

input[type=file]的files属性返回的是FileList类数组对象，本身没有实现数组的map方法，你代码中仅在forEach遍历前做了数组转换，后续直接对原始FileList调用map会触发报错，无法生成预期的格式数组。

修复代码 #

<input
  id="file"
  type="file"
  accept="image/*"
  multiple
  onChange={(e) => uploadImage(e.currentTarget.files)}
/>

const uploadImage = (files) => {
  // 先将FileList转为标准数组，再执行map生成目标格式
  const images = Array.from(files).map((image) => ({
    imageName: image.name,
    imageFile: image,
  }));
  console.log(images);
  return images;
};

可选优化 #

• 旧浏览器兼容：可以用[].slice.call(files)替代Array.from实现类数组转数组
• 新增合法性校验，过滤不符合要求的文件：

const uploadImage = (files) => {
  const validImages = Array.from(files).filter(file => {
    // 校验文件类型为图片
    if (!file.type.startsWith('image/')) {
      console.log(`跳过非图片文件：${file.name}`);
      return false;
    }
    // 可选：限制单张图片不超过5M
    const sizeLimit = 5 * 1024 * 1024;
    if (file.size > sizeLimit) {
      console.log(`跳过超大小限制文件：${file.name}`);
      return false;
    }
    return true;
  }).map(image => ({
    imageName: image.name,
    imageFile: image
  }));
  return validImages;
};

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