文件 Reader 告诉我参数 1 不是 blob？

Question

我有一个文件输入，returns 对我来说看起来像是文件路径，但 fileReader 给我以下错误。

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我觉得我在这里遗漏了什么。我哪里错了？

import React from 'react';

    export default class TestPage extends React.Component {
        constructor() {
            super();
            this.state = {
                file: ''
            }
        }

        onChange(e) {
            let reader = new FileReader();
            reader.onload = function(e) {
              this.setState({file: reader.result})
            }
            reader.readAsDataURL(e.target.value);
        }

        render() {
            return (
                <div>
                    <input onChange={this.onChange.bind(this)} type="file" name="file" />
                    <br />
                    <video width="400" controls>
                        <source src={this.state.file} type="video/mp4" />
                    </video>
                </div>
            )
        }
    }

Answer 1

答案很明显，就在错误中。 "Parameter 1 is not of type Blob" - 换句话说，readAsDataURL 需要一个 Blob 但这不是你传递给它的。 readAsDataURL is specifically meant to read Files or Blobs, not file paths. Meanwhile, the FileReader.result parameter will end up being a String or ArrayBuffer.

您可能想要做的是 pass in the input files array, not "e.target.value"，读取 AsDataURL。

onChange(e) {
  let reader = new FileReader();
  reader.onload = function(e) {
      this.setState({file: reader.result})
  }
  reader.readAsDataURL(e.target.files[0]);
}

Answer 2

我有同样的问题，我发现我正在使用 onClick 事件而不是 onChange 事件来触发文件 read 函数。

文件 Reader 告诉我参数 1 不是 blob？

File Reader telling me that parameter 1 is not a blob?

javascript

filereader

reactjs