Блог

Я создал небольшую функциональность в react, в которой я могу успешно загрузить файл и сохранить его в состоянии. Я пытаюсь проанализировать содержимое файла с помощью библиотеки npm «fs-extra» и распечатать его на консоли. Но я не могу сделать это успешно. Ниже приведен код:

 import * as fs from "fs-extra";
import axios from "axios";
export default class FileUpload extends React.Component<{}, { selectedFile: any, loaded: number }> {

constructor(props: any) {
    super(props);
    this.state = {
        selectedFile: null,
        loaded: 0
    }
}

changeHandler = (event: any) => {
    event.preventDefault();
    this.setState({
        selectedFile: event.target.files,
        loaded: 0
    })
}

clickHandler = async (event: any) => {
    event.preventDefault();
    const data = new FormData();
    for (let x = 0; x < this.state.selectedFile.length; x  ) {
        console.log(fs.readFileSync(this.state.selectedFile[x], "utf-8"))
        data.append('file', this.state.selectedFile[x])
    }
    axios.post("http://localhost:8080/test", data, {

    }).then(res => {
        console.log(res.statusText)
    });
}
render() {
    return (
        <div className="container-fluid bg-secondary">
            <div className="row">
                <div className="col-md-6">
                    <form>
                        <div className="form-group">
                            <label htmlFor="exampleFormControlFile1">Example file input</label>
                            <input
                                multiple
                                onChange={this.changeHandler}
                                type="file"
                                className="form-control-file"
                                id="exampleFormControlFile1" />
                            <button
                                type="button"
                                className="btn btn-success btn-block"
                                onClick={this.clickHandler}
                            >Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
}
  

Я получаю следующую ошибку:

 TypeError: Cannot read property 'native' of undefined
  

В чем проблема с этим кодом? Кроме того, как я могу достичь цели, которую я хочу достичь?