パラメータ1がブロブではないことを示すFile Reader？

Question

私は、私のファイルパスのように見えるファイル入力を持っていますが、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

答えは、それは誤りですぐそこです、かなり明白です。 "パラメータ1はBlob型ではありません" - つまり、readAsDataURLはBlobを要求しますが、それは渡すものではありません。一方、the FileReader.result parameter will end up being a String or ArrayBuffer。readAsDataURL is specifically meant to read Files or Blobs, not file paths.

readAsDataURLには、pass in the input files array, not "e.target.value"が必要です。

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