Angular ng2-file-upload在IE11中PNG文件过滤失效问题求助

你遇到的这个问题，核心原因是IE11对文件扩展名的大小写处理逻辑和现代浏览器不一致，导致PNG文件被错误过滤。下面给你具体的诊断和解决方案：

问题根源 #

在IE11环境中，文件的扩展名会保留用户系统里的原始大小写（比如用户选择的是image.PNG而不是image.png），而ng2-file-upload的allowedFileType配置是严格区分大小写的。你的代码里只配置了小写的'png'，所以带大写扩展名的PNG文件会被判定为不符合规则，无法加入上传队列。

解决方案 #

你可以选择以下任意一种方式解决：

方案1：扩展allowedFileType数组，包含大小写两种扩展名 #

直接在IE11的配置项中，把PNG的大小写扩展名都加入到允许列表里，这种方式简单直接：

if (navigator.userAgent.match(/Trident.*rv\:11\./)) {
  uploadOptions = {
    url: uploadUrl,
    allowedFileType: ['xls', 'xlsx', 'doc', 'docx', 'pdf', 'gif', 'jpg', 'jpeg', 'png', 'PNG', 'odt', 'txt', 'ods'],
    maxFileSize: 10 * 1024 * 1024
  };
}

方案2：添加自定义过滤器，统一处理扩展名大小写 #

如果担心其他扩展名（比如JPG、PDF）也出现类似的大小写问题，可以添加一个自定义过滤器，将文件扩展名转为小写后再匹配允许列表，这种方式更健壮：

// 创建uploader实例后，添加自定义过滤器
this.uploader = new FileUploader(uploadOptions);

this.uploader.filters.push({
  name: 'caseInsensitiveFileTypeFilter',
  fn: (item: FileItem, options: any) => {
    // 非IE11环境直接放行，因为已经用allowedMimeType处理了
    if (!navigator.userAgent.match(/Trident.*rv\:11\./)) {
      return true;
    }
    // 获取文件扩展名并转为小写
    const fileExtension = item.file.name.split('.').pop()?.toLowerCase() || '';
    // 定义允许的扩展名列表
    const allowedExtensions = ['xls', 'xlsx', 'doc', 'docx', 'pdf', 'gif', 'jpg', 'jpeg', 'png', 'odt', 'txt', 'ods'];
    // 检查是否在允许范围内
    return allowedExtensions.includes(fileExtension);
  }
});

验证测试 #

修改完成后，建议测试以下场景确保问题解决：

• 上传小写扩展名的image.png
• 上传大写扩展名的image.PNG
• 上传混合大小写的image.PnG

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