кодер base64 возвращает undefined в реакции - PullRequest
Новая
       9

кодер base64 возвращает undefined в реакции

0 голосов
/ 26 января 2019

Я пытаюсь сделать запрос API на мой сервер, где у меня есть файлы, которые я отправляю вместе.

Я создал массив пользовательских объектов, в котором у меня есть два параметра: расширение файла и база необработанных данных654 в кодировке 

  onSubmitHandler = (e) =>{
    e.preventDefault()
    const contactRequest = {
        email: this.state.email,
        name: this.state.name,
        message: this.state.message,
        files: this.state.files,
        result: this.state.files.map(file => ({
            "file": this.findFileTypeHandler(file.name), 
            "data": this.getBase64(file)
        }))
    }
    console.log(this.getBase64(this.state.files[0]))
    console.log(contactRequest)
}

Проблема в моей функции getBase64

Я попробовал несколько подходов.

    getBase64 = file => {
     let ans  = ''
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
    console.log(reader.result) //logged correctly here, but after undefined is returned
    ans = reader.result
    };
    reader.onerror = function (error) {
      console.log('error is ', error)
      return error;
    };
    return ans;
 }

правильный ответ записывается правильно, но сначала возвращается неопределенный.Это связано с асинхронным поведением.

Есть ли способ, поэтому я могу заставить его ждать, пока функция будет загружена правильно.

Первоначально я думал о том, чтобы сделать асинхронный подход ожидания, но я думаю, что это может привести к путанице, поскольку я уже планирую использовать обещания, когда я отправляю запрос на мой сервер.

1 Ответ

0 голосов
/ 26 января 2019

Хорошо, вот простой. Передайте функцию обратного вызова в getBase64, и тогда функция обратного вызова получит результат. Не требует особых изменений: 

getBase64 = (file, callBack) => {
    let ans = '';
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
        callBack(reader.result);
    };
    reader.onerror = error => {
        console.log('error is ', error);
        return error;
    };
};

Который вы потом сможете использовать как:

getBase64(target, res => console.log(res));

Или, если вы хотите получить результат в переменной, вы можете сделать: 

let b64;
getBase64(target, res => { b64 = res; });
...