Преобразование файлов в base64

Question

У меня есть функция в java-скрипте, которая запускает файлы.

Я выбрал с помощью типа ввода:

file множественный, эта функция перечисляет файлы, и для каждого файла они добавляют ссылку «See detail», которая, в свою очередь, при щелчке отправляет в обмен.

Эту ссылку я создаю при просмотре выбранных файлов.

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

Если я получаю Base64 для файла, но когда я не дебюгирую, моя переменная остается неопределенной.

Я оставляю свой код.

function handleFileSelect(e) {
            console.dir(e);
            if (!e.target.files) return;
            selDiv.innerHTML = "";
            var files = e.target.files;
            for (var i = 0; i < files.length; i++) {

                var base64;
                var fileToLoad = document.getElementById("files").files[i]
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent) {
                    base64 = fileLoadedEvent.target.result;
                    console.log(base64);
                };
                fileReader.readAsDataURL(fileToLoad);


                var f = files[i];
                var TmpPath = URL.createObjectURL(e.target.files[i]);
                var name = f.name;
                var extencion = f.name.split('.')[1];

                selDiv.innerHTML += f.name + "&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick=verdetalle(" + i + ",'" + extencion + "','" + name + "','" + base64 + "','" + TmpPath + "')>Ver Detalle</a>" + "<br/>";
            }
        }

этот раздел кода - моя проблема, почему?

                var base64;
                var fileToLoad = document.getElementById("files").files[i]
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent) {
                    base64 = fileLoadedEvent.target.result;
                    console.log(base64);
                };
                fileReader.readAsDataURL(fileToLoad);

Answer 1

1. FileReader работает асинхронно. base64 равно undefined во время цикла for.

2. Вы используете переменные области действия функции. Перезаписывает переменные.

async function тип:

document.querySelector( "input" ).addEventListener( "change", handleFileAsync );

async function handleFileAsync ( event ) {
  async function readFile( file ) {
    let reader = new FileReader();
    let result = new Promise( resolve => reader.addEventListener( "load", resolve ) );
    reader.readAsArrayBuffer( file );
    
    return { name: `name: ${file.name}`, ArrayBuffer: ( await result ).srcElement.result }
  }
  let files = event.srcElement.files;
  let promises = [];
  for ( const file of files ) {
    promises.push( readFile( file ) );
  }
  console.log( await Promise.all( promises ) );
}

<input type="file" multiple>

Эквивалентная нормальная функция, как указано выше:

document.querySelector( "input" ).addEventListener( "change", handleFile );

function handleFile ( event ) {
  let files = event.srcElement.files;
  let promises = [];
  for ( const file of files ) {
    let reader = new FileReader();
    promises.push(
      new Promise( resolve => reader.addEventListener( "load", resolve ) )
      .then( result => ( { name: `name: ${file.name}`, ArrayBuffer: result.srcElement.result } ) )
    );
    reader.readAsArrayBuffer( file );
  }
  Promise.all( promises ).then( list => console.log( list ) );
}

<input type="file" multiple>

Для использования консоли, код заголовка uese .readAsArrayBuffer вместо .readAsDataURL.