将 FileReader 与 React 和 Typescript 结合使用

Question

我想使用类型文件的输入上传 json 文件。当我在 fileReder 上使用 onload 方法时，Typescript 显示错误 - 无法调用可能为“null”的对象。 谢谢。

const UploadCharacter = () => {
    const [data, setData] = useState<any>();

    const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            const fileReader = new FileReader(); 
            fileReader.readAsText(e.target.files[0], 'UTF-8')
            fileReader.onload((e) => {  <-- Error: Cannot invoke an object which is possibly 'null'.
                console.log(e.target.result)
            })
        }


    }
    return (
        <div className={s.upload}>
            <input
                className={s.uploadInput}
                type="file"
                onChange={handleUpload}
            />
        </div>
    )
}

Answer 1

这应该有效：

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const reader = new FileReader();
      reader.readAsText(e.target.files[0], 'UTF-8');
      reader.onloadend = (readerEvent: ProgressEvent<FileReader>) => {
        if (readerEvent?.target?.result) {
          setPolicy(readerEvent.target.result.toString());
          updatePolicy(readerEvent.target.result.toString());
        }
      };
    }
  };

Answer 2

试试这个：

fileReader.onload = () => { console.log(fileReader.result) }