매개 변수 1이 얼룩이 아님을 알려주는 파일 판독기?

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에 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]); 
     }