Выберите локальные файлы с типом ввода: файл (pdf) и конвертируйте их в строку base64

Question

как получить строку base64 из выбранных файлов с типом ввода: файл (несколько .pdf) в javascript.Мне нужна строка 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/>";
            }
        }

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

в этой строке моегокод Я создаю ссылку для каждого выбранного файла, где я назначаю onchange и передаю переменные i, extension, name, base64, TmpPath, но мне не хватает переменной base64

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

Answer 1

Попробуйте приведенный ниже фрагмент кода,

var base64String;
function handleFileSelect(callback) {    
    var file = document.getElementById('filePicker').files[0];
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            base64String = btoa(binaryString);
            // alert(base64String);
            // Do additional stuff
            callback(base64String);
        };

        reader.readAsBinaryString(file);
};

<div>
    <div>
        <label for="filePicker">Choose file:</label><br>
        <input type="file" id="filePicker" onchange="handleFileSelect(function(base64String){alert(base64String)})">
    </div>
    <br>
</div>

Answer 2

Вы должны поместить функциональность, которая зависит от base64, в обратный вызов filereader.onload. Кроме того, всегда используйте const или let при работе с асинхронными циклами. var поднимается и имеет область действия, а не область блока, поэтому при его использовании легко столкнуться с проблемами. Или, что еще лучше, используйте forEach, который дает вам лучшую абстракцию, не требует ручной итерации и имеет область действия функции:

function handleFileSelect(e) {
  console.dir(e);
  const files = e.target.files;
  if (!files) return;
  selDiv.innerHTML = "";
  files.forEach((file, i) => {
    const { name } = file;
    const extencion = f.name.split('.')[1];
    const fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) {
      const base64 = fileLoadedEvent.target.result;
      console.log(base64);
      const TmpPath = URL.createObjectURL(file);
      selDiv.innerHTML += f.name + "&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick=verdetalle(" + i + ",'" + extencion + "','" + name + "','" + base64 + "','" + TmpPath + "')>Ver Detalle</a>" + "<br/>";
    };
    fileReader.readAsDataURL(file);
  });
}