时间戳

首页 > 解决方案 > 在base64中转换文件

javascript - 在base64中转换文件

问题描述

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

我通过输入类型进行了选择：

多个文件，此功能列出文件，并为每个文件添加一个链接“查看详细信息”，单击时依次发送到 onchange。

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

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

如果我得到每个文件的 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/>";
            }
        }

这部分代码是我的问题，为什么？

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

标签： javascriptjqueryhtmlbase64

解决方案

  1. FileReader 异步工作。base64在undefinedfor循环期间。

  2. 您正在使用函数范围变量。它覆盖变量。

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>

对于使用控制台，标题代码使用..readAsArrayBuffer而不是.readAsDataURL.

推荐阅读