web-dev-qa-db-ja.com

パラメータ1はblobではないとファイルリーダーから言われましたか？

ファイルパスのように見えるファイル入力がありますが、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>
            )
        }
    }
javascriptreactjsfilereader
5
Chaim Friedman

答えは非常に明白です、それはエラーの中にあります。 「パラメーター1はBlob型ではありません」-言い換えると、readAsDataURLはBlobを予期しますが、それは渡したものではありません。 readAsDataURLは、ファイルパスではなく、ファイルまたはブロブを読み取ることを特に意図しています。 一方、 FileReader.resultパラメータは最終的にStringまたはArrayBuffer になります。

おそらくやりたいことは "e.target.value"ではなく入力ファイル配列を渡す をreadAsDataURLに渡すことです。

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