javascript - 选择输入类型为 :file (pdf) and convert them to base64 string 的本地文件

Question

如何从具有输入类型的选定文件中获取 base64 字符串:javascript 中的文件(多个 .pdf)。我需要一个变量中的 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、扩展名、名称、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>