Question

我在离子v2应用中将输入文件对象转换为Base64时遇到问题。特别是在使用onload / onloadend阅读器时会出现这个问题，因为它偶尔会被调用（最稀有的最稀有的非常具体）。

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

文件输入：

<input #fileInput type="file" accept="image/*" (change)="attachFile($event)">

附加档案

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

Base64转换：

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

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

      console.log(reader.result);
    }

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

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

除非像我之前提到的最稀有的场合，否则不会调用包括 onerror 的回调。
Web浏览器中的相同代码完全正常，并且成功调用回调并将文件对象转换为Base64。

所以这给我留下了很少的选择，我无法为角度2找到一个像样的Base64转换插件，因为大多数插件都是针对旧角度的。

一个角度的插件很有希望 - angular-base64-upload但是我无法弄清楚如何在角度2中运行它，因为指令专门针对旧的角度。

当然必须有办法达到这个要求，任何线索都会受到高度赞赏。

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

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

Answer 1

检查一下。 https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview

模板

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

组件：

handleFileSelect(evt){
      var files = evt.target.files;
      var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload =this._handleReaderLoaded.bind(this);

        reader.readAsBinaryString(file);
    }
  }

  _handleReaderLoaded(readerEvt) {
     var binaryString = readerEvt.target.result;
            this.base64textString= btoa(binaryString);
            console.log(btoa(binaryString));
    }

修改： 关于这在Mobile中不起作用，似乎已知离子问题。 https://github.com/driftyco/ionic-native/issues/505

你可以尝试的事情

在cordova.js修复之前加载zone.js.

特定于ionic2 维持这个顺序。

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

，因为polyfills.js执行zone.js。

Answer 2

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

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

组件方

conImage(input) :void{
    //this.profileService.conImage().subscribe(convertimage => this.convertimage = convertimage);
if (input.target.files && input.target.files[0]) {
    var reader = new FileReader();
    //data = data.replace(/['"]+/g, '');
    //$('#imageupload').attr('src', e.target.result);
    reader.onload = function (e) {
        console.log(e.target.result)
        //console.log(e)
    };
    reader.readAsDataURL(input.target.files[0]);
}

}

console.log输出提供完整的base64代码，当你将base64放在图像的src中时，你将获得图像

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

2 个答案: