如何在 React 中使用 FileReader？（得到一个奇怪的错误）

Question

我试过

的解决方案

How to use FileReader in React?

并得到了与我的代码相同的错误。

我正在尝试在 React 组件中使用 FileReader()。

class Home extends Component {

  onChange(e) {
    let files = e.target.files;
    console.log(files);
    let reader = new FileReader();
    reader.readAsDataURL(files[0]);

    reader.onload = e => {
      console.log(e.target.result);
    };
  }

  render() {
    return (
        <div onSubmit={this.onFormSubmit}>
          <h1>Upload File Here</h1>
          <input type="file" name="file" onChange={e => this.onChange(e)} />
        </div>

export default Home;

console.log(files) returns 上传的文件（如果我运行它没有其余的 onChange() 代码）。当我运行整个事情时，我收到一条错误消息：

Error: cannot read as File: {} 在 reader.readAsDataURL(files[0]);

我完全按照本教程进行操作，对他们来说效果很好。有什么想法吗？！

https://www.youtube.com/watch?v=sp9r6hSWH_o&t=50s

Answer 1

试试这个

改变

   onChange(e) {
        let files = e.target.files;
         console.log(files);
         let reader = new FileReader();
         reader.readAsDataURL(files[0]);

          reader.onload = e => {
              console.log(e.target.result);
          };
     }

至

    onChange = e => {
         let files = e.target.files;
         console.log(files);
         let reader = new FileReader();
         reader.onload = r => {
              console.log(r.target.result);
          };
         reader.readAsDataURL(files[0]);
     }

如何在 React 中使用 FileReader？（得到一个奇怪的错误）

How to use FileReader with React? (getting a strange error)

filereader

reactjs

如何在 React 中使用 FileReader？ （得到一个奇怪的错误）

How to use FileReader with React? (getting a strange error)

filereader

reactjs

如何在 React 中使用 FileReader？（得到一个奇怪的错误）