SPFx中DropZone上传文件到SharePoint文档库报类型不匹配错误

这个报错是多个问题叠加导致的：

• TypeScript类型层面：FileReader.result的内置类型定义就是string | ArrayBuffer——根据调用的FileReader读取方法不同，返回值类型会变：调用readAsText/readAsDataURL时返回字符串，调用readAsArrayBuffer时返回ArrayBuffer。直接把联合类型的值传给只接受ArrayBuffer的uploadExcel方法，TS无法确认值的类型一定匹配，就会抛出类型错误。
• 代码逻辑层面：当前代码只绑定了FileReader的事件回调，根本没有调用实际的读取方法，就算类型校验通过，onload回调永远不会触发，上传逻辑根本不会执行。
• 额外隐藏问题：把上传文件名写死为Category，既没有文件扩展名会导致上传后的文件无法正常打开，也会出现同名文件互相覆盖的问题。

按以下步骤调整代码即可：

1. 补上FileReader的读取方法调用，明确指定用readAsArrayBuffer读取文件，保证拿到的结果是ArrayBuffer格式
2. 增加类型判断做类型收窄，既消除TS类型报错，也做运行时校验避免异常值传入
3. 调整文件名规则，保留原文件扩展名、增加唯一标识避免文件覆盖

修正后的onDrop方法代码如下：

private onDrop = (acceptedFiles: File[]) => {
  try{
    acceptedFiles.forEach(file => {
      const reader = new FileReader()
      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload = async () => {
        // 类型收窄：确认读取结果是ArrayBuffer再执行上传
        if (reader.result instanceof ArrayBuffer) {
          // 生成带唯一标识、保留原后缀的文件名，避免覆盖
          const uploadFileName = `Category_${Date.now()}_${file.name}`;
          await this.props.uploadExcel(uploadFileName, reader.result);
        }
      }
      // 关键：调用ArrayBuffer格式读取方法，触发onload回调
      reader.readAsArrayBuffer(file);
    })
  }
  catch(e) {
    const result = (e as Error).message;
    alert(result);
  }
};

如果只是想快速跳过类型校验（不推荐，没有运行时安全保障），也可以直接用类型断言强制指定类型：

this.props.uploadExcel("Category", binaryStr as ArrayBuffer);

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