使用TypeScript限制上传文件大小与类型的代码失效问题求助

• 事件绑定失效：你在HTML中通过onchange="validateFileType()"绑定的方法会从全局作用域查找，而你定义的validateFileType是TS类的私有方法，编译后不会挂载到window全局对象上，触发事件时会报方法未定义错误，校验逻辑完全不会执行。
• 大小校验未触发：你写的validateFileSize方法没有任何地方调用，自然不会生效。
• 缺少空值防护：如果用户打开文件选择框后直接点击取消，fileInput.files会是null，直接访问fileName.files[0].size会抛出未捕获的类型错误，打断逻辑执行。
• 校验失败未清空选择：你原来的类型校验逻辑中，校验失败后没有清空input的值，用户下次选择同一个不符合要求的文件时不会触发change事件。

首先修改HTML代码，移除inline的onchange绑定：

<label class="custom-file-upload">
  <input 
    type="file" 
    id="fileName" 
    accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
  />
  <i class="fas fa-cloud-upload"></i> 
  Upload
</label>

然后修改TS代码，统一绑定事件、合并校验逻辑：

// 页面初始化完成后绑定文件选择事件，根据你的框架可以放到对应的生命周期钩子中，比如React的useEffect、Vue的onMounted、Angular的ngOnInit
window.addEventListener('load', () => {
  const fileInput = document.getElementById('fileName') as HTMLInputElement;
  fileInput?.addEventListener('change', () => this.handleFileCheck(fileInput));
});

private handleFileCheck(fileInput: HTMLInputElement) {
  // 空值防护：用户取消选择时直接返回
  if (!fileInput.files || fileInput.files.length === 0) {
    return;
  }
  const targetFile = fileInput.files[0];
  const maxSize = 2 * 1024 * 1024; // 2MB
  const allowedExts = ['xls', 'xlsx'];
  const allowedMimeTypes = [
    'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  ];

  // 校验文件类型，同时校验后缀和mime type，避免伪造后缀的情况
  const fileExt = targetFile.name.split('.').pop()?.toLowerCase() || '';
  if (!allowedExts.includes(fileExt) || !allowedMimeTypes.includes(targetFile.type)) {
    // 替换为你的通知逻辑
    alert('仅支持上传.xls、.xlsx格式的Excel文件');
    fileInput.value = '';
    return;
  }

  // 校验文件大小
  if (targetFile.size > maxSize) {
    // 替换为你的通知逻辑
    alert('上传文件大小不能超过2MB');
    fileInput.value = '';
    return;
  }

  // 校验通过，执行后续业务逻辑
  // TODO 你的上传逻辑
}

accept属性只是给系统文件选择器提供默认筛选规则，用户还是可以手动选择所有类型的文件，所以服务端也要再加一层校验，避免恶意上传。

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