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

如何从javascript中输入类型为file（multiple.pdf）的选定文件中获取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/>";
            }
        }

功能手柄文件选择（e）{
署长（e）；
如果（！e.target.files）返回；
selDiv.innerHTML=“”；
var files=e.target.files；
对于（var i=0；i”；
}
}

但我不尊重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/>";

selDiv.innerHTML++=f.name++++“
”；

您需要将依赖于

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

功能手柄文件选择（e）{
署长（e）；
const files=e.target.files；
如果（！文件）返回；
selDiv.innerHTML=“”；
files.forEach（（文件，i）=>{
const{name}=文件；
const extencion=f.name.split（'.'）[1]；
const fileReader=new fileReader（）；
fileReader.onload=函数（fileLoadedEvent）{
const base64=fileLoadedEvent.target.result；
console.log（base64）；
const TmpPath=URL.createObjectURL（文件）；
selDiv.innerHTML++=f.name++“
”；
};
fileReader.readAsDataURL（文件）；
});
}

试试下面的代码片段

var base64String；
函数handleFileSelect（回调）{
var file=document.getElementById（'filePicker'）.files[0]；
var reader=new FileReader（）；
reader.onload=函数（readerEvt）{
var binaryString=readerEvt.target.result；
base64String=btoa（二进制字符串）；
//警报（base64String）；
//做额外的事情
回调（base64String）；
};
reader.readAsBinaryString（文件）；
};

选择文件：



code please….但如何将base64字符串分配给变量？var binaryString=readerEvt.target.result；base64String=btoa（二进制字符串）；警报（base64String）；var binaryString不能在其函数之外使用？programtreasures？@Bichito生成base 64字符串后，您需要在in reader onload函数中执行进一步操作，您将无法从外部获取任何变量值function@Bichito不，您不能返回它，但可以从中创建回调函数