FileReader를 사용하지 않고 입력 파일을 각도 2로 Base64로 변환합니다.

Question

입력 파일 객체를 Base32로 변환하는 중입니다. ionic v2 앱입니다. 이 문제는 onload/onloadend 리더를 가끔씩 만 호출 할 때 특히 발생합니다 (아주 희귀 한 경우가 드뭅니다).

사용자가 attachFile 함수를 트리거하는 이미지 파일을 클릭 할 때 파일 이름, 크기 및 객체를 가져올 수 있지만 FileReader를 사용하여 파일 객체를 Base64로 변환하면 콜백 함수가 onload 또는 onloadend됩니다. 거의 호출되지 않고이 결과로 파일 객체가 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); 
} 

Base64로 전환 :

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

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

     console.log(reader.result); 
    } 

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

012,351,641

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

는 파일 첨부

이것이 완전히 작동하지 않는 경우를 이해할 수 있지만 onload/onloadend 콜백이 호출되어 Android 휴대 전화에서 개체를 Base64로 변환하는 경우가 드뭅니다. 콜백의

• 없음은 희귀 한 경우의 희귀 내가 전에 언급처럼하지 않는 의 OnError 포함라고하지 않습니다.
• 웹 브라우저의 동일한 코드가 제대로 작동하고 콜백이 성공적으로 호출되고 파일 객체가 Base64로 변환됩니다.

이렇게하면 약간의 옵션 만 남겨 둡니다. 대부분의 플러그인이 구형에 불과하므로 각도 2 용으로 만들어진 괜찮은 Base64 변환 플러그인 재단사를 찾을 수 없습니다.

각도 용 플러그인 중 하나가 많은 가능성을 가지고 있었지만 - angular-base64-upload을 사용했지만 이전 버전의 지침과 달리 각도 2에서 실행하는 방법을 이해하지 못했습니다.

분명히이 요구 사항을 달성 할 수있는 방법이 있어야하며, 모든 리드를 높이 평가해야합니다.

필자의 요구 사항은 Base64 변환 플러그인이 파일 경로에 종속되어서는 안되며 사용자가 선택한 파일 입력에서 가져온 파일 객체를 직접 변환해야한다는 것입니다.

P.S : 나는 이미 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)); 
    } 

편집 : 모바일에서 작동하지 않는이에 관해서는, 이온에 문제가 알려진 것 같다. cordova.js도를 수정하기 전에 https://github.com/driftyco/ionic-native/issues/505

것들 당신은

로드 zone.js을 시도 할 수 있습니다.

ionic2에만 해당. 이 순서 순서를 유지합니다.

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

polyfills.js가 zone.js를 실행함에 따라.