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，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

尝试下面的代码段，

＆＃13;

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);
};

＆＃13;

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

＆＃13;

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);
  });
}

选择输入类型为：文件（pdf）的本地文件，并将它们转换为base64字符串

2 个答案: