Как получить строку base64 в переменной?

Question

Это мой код: но не получить строку base64 в моей переменной.Мне нужна строка base64 в этой переменной var base64.Я видел другие проблемы, но ни одна из них не отвечает тому, что мне нужно

<input type:file multiple id="files">



 <script>
function listarchivos(){
    var base64; //in this variable i need the base64
    var selectedFile = document.getElementById("files").files;
           var fileToLoad = selectedFile[0];
     getBase64(fileToLoad).then(
                      data => alert(data)
                    );
               }

    //This is my function for get base64, but not return the string base64
    function getBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
            return Promise.resolve(reader.result)
        });
    }
    </script>

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

 I have already tried the following options
  var base64 = getBase64(fileToLoad).then(
                          data => alert(data)
                        ); //this not works

getBase64(fileToLoad).then(
                          data => base64 = data
                        ); //This not works

getBase64(fileToLoad).then(
                          data => return{data}
                        );//this not works

Answer 1

Поскольку Promise делает функцию асинхронной, следующий код будет запускать getBase64() и непрерывно выполнять console.log(base64), который еще не определен.

function listarchivos() {
  base64; //in this variable i need the base64
  var selectedFile = document.getElementById("files").files;
  var fileToLoad = selectedFile[0];
  getBase64(fileToLoad).then(
    data => {
      base64 = data;
    }
  );
  console.log(base64) // undefined
}

Так что вам следует await для getBase64() сделать или использовать обратный вызов, как показано ниже.

дождаться примера 1

async function listarchivos() {
  var base64; //in this variable i need the base64
  var selectedFile = document.getElementById("files").files;
  var fileToLoad = selectedFile[0];
  await getBase64(fileToLoad).then(
    data => {
      alert(data);
      base64 = data;
    }
  );
  console.log(base64)
}

//This is my function for get base64, but not return the string base64
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
    return Promise.resolve(reader.result)
  });
}

$('#files').on('change', listarchivos)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="files">

дождаться примера 2

async function listarchivos() {
  var base64; //in this variable i need the base64
  var selectedFile = document.getElementById("files").files;
  var fileToLoad = selectedFile[0];
  base64 = await getBase64(fileToLoad).then(
    data => {
      return data;
    }
  );
  console.log(base64)
}

//This is my function for get base64, but not return the string base64
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
    return Promise.resolve(reader.result)
  });
}

$('#files').on('change', listarchivos)

function DoSomething() {
  console.log(base64)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="files">

обратный вызов

var base64;

function listarchivos() {
  var selectedFile = document.getElementById("files").files;
  var fileToLoad = selectedFile[0];
  getBase64(fileToLoad).then(
    data => {
      base64 = data;
      DoSomething()
    }
  );
}

//This is my function for get base64, but not return the string base64
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
    return Promise.resolve(reader.result)
  });
}

$('#files').on('change', listarchivos)

function DoSomething() {
  console.log(base64)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="files">