将输入文件转换为Angular 2中的Base64，而不使用Ionic V2中的FileReader

在我的爱奥尼亚v2应用程序中，将输入文件对象转换为Base64时遇到问题。当使用onload/onloadend读卡器时，这个问题会特别出现，因为它只是偶尔被调用（稀罕中的稀罕是非常具体的）

当用户单击触发attachFile函数的图像文件时，我能够获得文件名、大小和对象，但是在这之后，当我使用FileReader-onload或onloadend将文件对象转换为Base64时，回调函数很少被调用，因此文件对象不会转换为Base64

文件输入：

attachFile(fileInput: any)
{
  let fileList: FileList = fileInput.target.files;

  // I can access the selected file name, size and object correctly without any issues
  console.log("File name = " + fileList[0].name);
  console.log("File size = " + fileList[0].size);
  console.log("File = " + fileList[0]);

  // Converting the file input to base 64 (This rarely works)
  this.convertFileToBase64AndSet(fileList);
}

convertFileToBase64AndSet(fileList: FileList)
{
   if(fileList.length > 0)
  {
    var reader = new FileReader();

      reader.onloadend = (e: Event) => {

      console.log(reader.result);
    }

    reader.readAsDataURL(fileList[0]);
  }
}

附加文件：

attachFile(fileInput: any)
{
  let fileList: FileList = fileInput.target.files;

  // I can access the selected file name, size and object correctly without any issues
  console.log("File name = " + fileList[0].name);
  console.log("File size = " + fileList[0].size);
  console.log("File = " + fileList[0]);

  // Converting the file input to base 64 (This rarely works)
  this.convertFileToBase64AndSet(fileList);
}

convertFileToBase64AndSet(fileList: FileList)
{
   if(fileList.length > 0)
  {
    var reader = new FileReader();

      reader.onloadend = (e: Event) => {

      console.log(reader.result);
    }

    reader.readAsDataURL(fileList[0]);
  }
}

Base64转换：

attachFile(fileInput: any)
{
  let fileList: FileList = fileInput.target.files;

  // I can access the selected file name, size and object correctly without any issues
  console.log("File name = " + fileList[0].name);
  console.log("File size = " + fileList[0].size);
  console.log("File = " + fileList[0]);

  // Converting the file input to base 64 (This rarely works)
  this.convertFileToBase64AndSet(fileList);
}

convertFileToBase64AndSet(fileList: FileList)
{
   if(fileList.length > 0)
  {
    var reader = new FileReader();

      reader.onloadend = (e: Event) => {

      console.log(reader.result);
    }

    reader.readAsDataURL(fileList[0]);
  }
}

我可以理解这是否完全不起作用，但在我的Android手机中，很少有调用onload/onloadend回调并成功将对象转换为Base64的情况

• 所有回调都不会被调用，包括onerror，除非是我前面提到的最罕见的情况
• web浏览器中的相同代码工作得非常好，回调成功地被调用并将文件对象转换为Base64

因此，这让我几乎没有选择，我无法找到一个像样的Base64转换插件，专门为angular 2定制，因为周围的大多数插件都只针对旧angular

angular的一个插件很有前途，但我无法理解如何在angular 2中运行它，因为说明是专门针对旧angular的

当然，必须有一个方法来实现这一要求，任何线索将高度赞赏

我的要求是Base64转换插件不应依赖于任何文件路径，而应直接转换从用户选择的文件输入中获取的文件对象。

p.S:我已经在stackoverflow中看到了关于FileReader回调的所有答案，到目前为止，没有一个对我有效。

检查这个。

模板

<input type="file" id="filePicker" (change)="handleFileSelect($event)">

编辑： 关于这一点，在移动设备中不起作用，这似乎是爱奥尼亚的已知问题。

你可以尝试的事情

在cordova.js之前加载zone.js也可以修复它

特定于ionic2 保持这个顺序

<script src="build/polyfills.js"></script>
 <script src="cordova.js"</script>

看看这个。

模板

<input type="file" id="filePicker" (change)="handleFileSelect($event)">

编辑：
关于这一点，在移动设备中不起作用，这似乎是爱奥尼亚的已知问题。

你可以尝试的事情

在cordova.js之前加载zone.js也可以修复它

特定于ionic2
保持这个顺序

<script src="build/polyfills.js"></script>
 <script src="cordova.js"</script>


当我尝试上一个解决方案时，base 64没有完成
html部分

<input type="file" class="form-control input-lg" #fileInput type="file" accept="image/*" (change)="conImage($event)" name="Image"/>

console.log输出提供完整的base64代码，当您将base64放入映像的src中时，您将获得映像
当我尝试上一个解决方案时，base64未完成
html部分

<input type="file" class="form-control input-lg" #fileInput type="file" accept="image/*" (change)="conImage($event)" name="Image"/>

console.log输出提供了完整的base64代码，当您将base64放入图像的src中时，您将得到图像
我记得在另一个问题中看到了此解决方案，这是我最初尝试的第一个解决方案，但不幸的是，它不起作用。使用相同的plunker代码再次尝试，以查看是否遗漏了任何内容，问题仍然存在。抱歉，问题是什么？当我在android手机上运行FileReader回调时，问题是我无法获得base64转换（具体来说，Nexus 6p运行牛轧糖）。这同样适用于浏览器，但不适用于手机，尽管有时它适用于我的Nexus 6P，成功率为1:100。@PathGhiya-谢谢，确切的答案是在polyfills.js执行zone.js时加载@index.html之前。请更新您的答案，因为我预计会有更多的人有这个问题。一旦你这么做了，我会接受这个正确答案：-）。再次感谢您的关注，您救了我的命。@VikramEzhil:欢迎您：）是的，很多人会偶然发现这一点。您可以接受&+1:）我记得在另一个问题中看到了这个解决方案，这是我最初尝试的第一个解决方案，但不幸的是，它没有起作用。使用相同的plunker代码再次尝试，以查看是否遗漏了任何内容，问题仍然存在。抱歉，问题是什么？当我在android手机上运行FileReader回调时，问题是我无法获得base64转换（具体来说，Nexus 6p运行牛轧糖）。这同样适用于浏览器，但不适用于手机，尽管有时它适用于我的Nexus 6P，成功率为1:100。@PathGhiya-谢谢，确切的答案是在polyfills.js执行zone.js时加载@index.html之前。请更新您的答案，因为我预计会有更多的人有这个问题。一旦你这么做了，我会接受这个正确答案：-）。再次感谢您的关注，您救了我的命。@VikramEzhil:欢迎您：）是的，很多人会偶然发现这一点。您可以接受&+1:）