Javascript base64 인코딩 함수가 undefined를 반환합니다.

Question

문자열 배열에 Base64로 인코딩 된 이미지를 추가하려고합니다.

<FormControl 
    type="file" 
    values={this.state.files} 
    multiple 
    onChange={this.addImage.bind(this)} 
/> 

내가이 함수 호출 오전 :

addImage(event) { 
    var newArr = []; 
    for(var i=0; i<event.target.files.length; i++) { 
    newArr.push(this.getBase64(event.target.files[i]))); 
    } 
    this.setState({ files: newArr }); 
} 

영상을 인코딩 기능은 다음과 같습니다

getBase64(file) { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
    return reader.result 
    } 
    reader.readAsDataURL(file); 
} 

반응 - 부트 스트랩의 FormControl로 만든 파일 입력 양식을 사용하여 addImage() 함수는 getBase64() 함수를 호출합니다. 반환 값은 입니다. 정의되지 않음은입니다. 이것은 getBase64() 함수가 실행될 때부터 발생한다고 생각합니다. reader.result를 내뱉기 위해 console.log 행을 추가하면 base64 문자열이 콘솔에 올바르게 출력되지만 반환 값은 여전히 ​​동일합니다.

여기서 무슨 일이 일어나고 실제 base64 문자열이 제대로 반환 될 수 있습니까?

Answer 1

getBase64에서 아무런 값도 비동기 적으로 결과를 제공하는 이벤트 처리기 내에서 동 기적으로 반환됩니다. FileReaderloadend 이벤트가 비동기 적으로 결과를 반환합니다. 당신은 값이 오른쪽

class ReadFiles { 
 
    constructor() {} 
 
    async addImage(event) { 
 
    const newArr = []; 
 
    for (let i = 0; i < event.target.files.length; i++) { 
 
     newArr.push(
 
     await this.getBase64(event.target.files[i]) 
 
    ); 
 
    } 
 
    const o = { 
 
     files: newArr 
 
    }; 
 

 
    console.log(o); 
 
    } 
 

 
    getBase64(file) { 
 
    return new Promise(function(resolve) { 
 
     var reader = new FileReader(); 
 
     reader.onloadend = function() { 
 
     resolve(reader.result) 
 
     } 
 
     reader.readAsDataURL(file); 
 
    }) 
 
    } 
 

 
} 
 

 
let reader = new ReadFiles(); 
 

 
document.querySelector("input[type=file]") 
 
.onchange = e => reader.addImage.call(reader, e);

<input type="file" multiple>

당신이 getBase64` 기능`에는`return`가 없습니다 볼 수 있습니다