Question

我在java脚本中有一个运行文件的函数。

我通过输入类型选择：

文件多个，此功能列出文件，并为每个文件添加链接＆＃34;查看详细信息＆＃34;这又是当点击发送到onchange时。

我在浏览所选文件时创建的链接。

问题是在这个函数中我需要在每个文件的BASE64中获得balor，我只在从浏览器调试脚本时才这样做。

如果我获得每个文件的Base64，但是当我没有debugeo时，它会使我的变量无限期。

我留下了我的代码。

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

FileReader异步工作。 for循环期间base64为undefined。
您正在使用函数范围变量。它会覆盖变量。

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>

使用控制台时，标题代码为u .readAsArrayBuffer而不是.readAsDataURL。

在base64中转换文件

1 个答案: