filereader

PC8 / CP437 character set with filereader in Chrome

こ雲淡風輕ζ — Thu, 18 Feb 2021 23:48:35 +0000

PC8 / CP437 character set with filereader in Chrome こ雲淡風輕ζ 2021-02-19 07:48:35

问题

anyone knows if it is possible to get the FileReader API in chrome to read a file with the CP437 character set? Is there a place where I can list the available encodings? Currently, my workaround is to read it with CP1251 reader.readAsText(file, 'CP1251') and manually replace special characters, which is not cool! Is there other browsers which support this character set? Or do you have any better idea at a workaround?

Edit: The file is parsed only in the browser, there is no backend available.

regards Oskar

回答1:

I had the same problem. CP437 isn't implemented (in Chrome and Firefox at least).

Work around to convert to UTF-8 that requires ArrayBuffer support in the browser:

var Cp437Helper = function () {
    var cp437map = [
        '\u0000', '\u0001', '\u0002', '\u0003', '\u0004', '\u0005', '\u0006',
        '\u0007', '\u0008', '\u0009', '\u000A', '\u000B', '\u000C', '\u000D', 
        '\u000E', '\u000F', '\u0010', '\u0011', '\u0012', '\u0013', '\u0014', 
        '\u0015', '\u0016', '\u0017', '\u0018', '\u0019', '\u001A', '\u001B', 
        '\u001C', '\u001D', '\u001E', '\u001F', '\u0020', '\u0021', '\u0022', 
        '\u0023', '\u0024', '\u0025', '\u0026', '\u0027', '\u0028', '\u0029', 
        '\u002A', '\u002B', '\u002C', '\u002D', '\u002E', '\u002F', '\u0030', 
        '\u0031', '\u0032', '\u0033', '\u0034', '\u0035', '\u0036', '\u0037', 
        '\u0038', '\u0039', '\u003A', '\u003B', '\u003C', '\u003D', '\u003E', 
        '\u003F', '\u0040', '\u0041', '\u0042', '\u0043', '\u0044', '\u0045', 
        '\u0046', '\u0047', '\u0048', '\u0049', '\u004A', '\u004B', '\u004C', 
        '\u004D', '\u004E', '\u004F', '\u0050', '\u0051', '\u0052', '\u0053',
        '\u0054', '\u0055', '\u0056', '\u0057', '\u0058', '\u0059', '\u005A', 
        '\u005B', '\u005C', '\u005D', '\u005E', '\u005F', '\u0060', '\u0061', 
        '\u0062', '\u0063', '\u0064', '\u0065', '\u0066', '\u0067', '\u0068', 
        '\u0069', '\u006A', '\u006B', '\u006C', '\u006D', '\u006E', '\u006F', 
        '\u0070', '\u0071', '\u0072', '\u0073', '\u0074', '\u0075', '\u0076', 
        '\u0077', '\u0078', '\u0079', '\u007A', '\u007B', '\u007C', '\u007D', 
        '\u007E', '\u007F', '\u00C7', '\u00FC', '\u00E9', '\u00E2', '\u00E4', 
        '\u00E0', '\u00E5', '\u00E7', '\u00EA', '\u00EB', '\u00E8', '\u00EF', 
        '\u00EE', '\u00EC', '\u00C4', '\u00C5', '\u00C9', '\u00E6', '\u00C6', 
        '\u00F4', '\u00F6', '\u00F2', '\u00FB', '\u00F9', '\u00FF', '\u00D6', 
        '\u00DC', '\u00A2', '\u00A3', '\u00A5', '\u20A7', '\u0192', '\u00E1', 
        '\u00ED', '\u00F3', '\u00FA', '\u00F1', '\u00D1', '\u00AA', '\u00BA',
        '\u00BF', '\u2310', '\u00AC', '\u00BD', '\u00BC', '\u00A1', '\u00AB', 
        '\u00BB', '\u2591', '\u2592', '\u2593', '\u2502', '\u2524', '\u2561', 
        '\u2562', '\u2556', '\u2555', '\u2563', '\u2551', '\u2557', '\u255D', 
        '\u255C', '\u255B', '\u2510', '\u2514', '\u2534', '\u252C', '\u251C', 
        '\u2500', '\u253C', '\u255E', '\u255F', '\u255A', '\u2554', '\u2569', 
        '\u2566', '\u2560', '\u2550', '\u256C', '\u2567', '\u2568', '\u2564', 
        '\u2565', '\u2559', '\u2558', '\u2552', '\u2553', '\u256B', '\u256A', 
        '\u2518', '\u250C', '\u2588', '\u2584', '\u258C', '\u2590', '\u2580', 
        '\u03B1', '\u00DF', '\u0393', '\u03C0', '\u03A3', '\u03C3', '\u00B5', 
        '\u03C4', '\u03A6', '\u0398', '\u03A9', '\u03B4', '\u221E', '\u03C6', 
        '\u03B5', '\u2229', '\u2261', '\u00B1', '\u2265', '\u2264', '\u2320', 
        '\u2321', '\u00F7', '\u2248', '\u00B0', '\u2219', '\u00B7', '\u221A',
        '\u207F', '\u00B2', '\u25A0', '\u00A0'
    ];

    this.convertToUTF8 = function (buffer) {
        var out = '';
        var view = new DataView(buffer);

        var i ;
        var n = view.byteLength;
        for (i  = 0; i  < n; i ++) {
            var uint = view.getUint8(i);
            if (cp437map[ uint ] == undefined) {
                out += '/' + uint + '/';
            } else {
                out += cp437map[ uint ];
            }
        }
        return out;
    };

    if ( Cp437Helper.prototype._instance == undefined ) {
      Cp437Helper.prototype._instance = this;
    }
    return Cp437Helper.prototype._instance;
};

Use the above:

var getTextFromCP437File = function ( file ) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var text = Cp437Helper().convertToUTF8(reader.result);
        // do something...
    };
    //reader.readAsText(file, 'cp437');
    reader.readAsArrayBuffer(file);
};

来源：https://stackoverflow.com/questions/17815444/pc8-cp437-character-set-with-filereader-in-chrome

标签

javascript

html

google-chrome

character-encoding

filereader

Javascript - Save typed array as blob and read back in as binary data

僤鯓⒐⒋嵵緔 — Thu, 18 Feb 2021 02:54:06 +0000

Javascript - Save typed array as blob and read back in as binary data 僤鯓⒐⒋嵵緔 2021-02-18 10:54:06

问题

I have a typed array full of binary data that is being generated from an ArrayBuffer

var myArr = new Uint8Array(myBuffer);

I am presenting this to the user with

var blob = new Blob(myArr, {type: "octet/stream"};
var blobURL = URL.createObjectURL(blob);

and inserting a link that is

"<a href=" + blobUrl + " download=" + filename "/a>"

Later, I am letting the user select the file from disk, and using a file reader to do with

var reader = new FileReader();

reader.onload = function () {
console.log(reader.result);
};

reader.readAsArrayBuffer(sourceFile);

The problem is, it seems like no matter what I do, I get a "string" of the file's contents. In fact, when I save the file, I can open it, and it is plainly human readable. I.E. if my Uint8Array was {"0" : "51", "1" : "52", "2" : "53" }

I can open the downloaded blob in a text editor and I just see "515253" which I don't think is what should be happening.

How can I make a link to a file download for my file that is formatted properly so I can read it back in an dget the right values?

回答1:

As it turns out, the problem was that I had a syntax error in the creation of the Blob.

The corrected code looked like: var blob = new Blob([myArr], {type: "octet/stream"});

I'm not really sure why if I am already passing an ArrayBuffer argument. Why I need bracket notation? Seems redundant?

回答2:

According to Mozilla

https://developer.mozilla.org/en-US/docs/Web/API/Blob#Example_for_creating_a_URL_to_a_typed_array_using_a_blob

var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'});

来源：https://stackoverflow.com/questions/36985406/javascript-save-typed-array-as-blob-and-read-back-in-as-binary-data

标签

Javascript - Save typed array as blob and read back in as binary data

泄露秘密 — Thu, 18 Feb 2021 02:53:07 +0000

Javascript - Save typed array as blob and read back in as binary data 泄露秘密 2021-02-18 10:53:07

问题

I have a typed array full of binary data that is being generated from an ArrayBuffer

var myArr = new Uint8Array(myBuffer);

I am presenting this to the user with

var blob = new Blob(myArr, {type: "octet/stream"};
var blobURL = URL.createObjectURL(blob);

and inserting a link that is

"<a href=" + blobUrl + " download=" + filename "/a>"

Later, I am letting the user select the file from disk, and using a file reader to do with

var reader = new FileReader();

reader.onload = function () {
console.log(reader.result);
};

reader.readAsArrayBuffer(sourceFile);

I can open the downloaded blob in a text editor and I just see "515253" which I don't think is what should be happening.

How can I make a link to a file download for my file that is formatted properly so I can read it back in an dget the right values?

回答1:

As it turns out, the problem was that I had a syntax error in the creation of the Blob.

The corrected code looked like: var blob = new Blob([myArr], {type: "octet/stream"});

I'm not really sure why if I am already passing an ArrayBuffer argument. Why I need bracket notation? Seems redundant?

回答2:

According to Mozilla

https://developer.mozilla.org/en-US/docs/Web/API/Blob#Example_for_creating_a_URL_to_a_typed_array_using_a_blob

var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'});

来源：https://stackoverflow.com/questions/36985406/javascript-save-typed-array-as-blob-and-read-back-in-as-binary-data

标签

How to write multiple ArrayList in a text file

天大地大妈咪最大 — Tue, 16 Feb 2021 23:19:05 +0000

How to write multiple ArrayList in a text file 天大地大妈咪最大 2021-02-17 07:19:05

问题

In below code , i'm trying to create a txt file and there i want to add some list of values. So here my approach is create a new file if file is not present and add the respective elements into it.

Please see below , i'm unable to get my expected output, So can you help me with some idea so it will be very helpful

   public class MyTest {

    public static void main(String[] args) throws Exception  {
        // TODO Auto-generated method stub
        SftpConn sftp = new SftpConn();
        //sftp.sftpGetConnect();
        List<String> list =  new ArrayList<>();
        list.add("AAAA");
        list.add("BBBB");
        list.add("CCCC");
        sftp.writeIntoText(list);
        List<String> list1 =  new ArrayList<>();
        list1.add("AAAA1111");
        list1.add("BBBB2222");
        list1.add("CCCC2222");
        sftp.writeIntoText(list1);
    }
        
    }




 public class SftpConn
      {
    public void writeIntoText(List<String> result) throws Exception
        {
                    connect();
                    List<String> resultdata= result;
                    System.out.println("Result Updated");
                    channelSftp = (ChannelSftp) session.openChannel("sftp");
                    channelSftp.connect();
                    fileOutStream = channelSftp.put("/home/dasrsoum/RM.txt");
                    PrintWriter writer = new PrintWriter(fileOutStream,true);
                    writer.println("------------------");
                    for (String value : resultdata) {
                        writer.println(value+ System.lineSeparator());
                        System.out.println(value);
                    
                    }
                    
            
            writer.close();
   }

Actual output

 AAAA1111
   BBBB2222
   CCCC2222

Excepted OutPut

  AAAA
  BBBB
  CCCC
  AAAA1111
  BBBB2222
  CCCC2222

回答1:

You first file is overwritten by the second call to the function

来源：https://stackoverflow.com/questions/63048653/how-to-write-multiple-arraylist-in-a-text-file

标签

FileReader.readAsBinaryString() is not support IE 10, 11

谁说胖子不能爱 — Wed, 10 Feb 2021 17:43:18 +0000

FileReader.readAsBinaryString() is not support IE 10, 11 谁说胖子不能爱 2021-02-11 01:43:18

问题

The below code works in chrome browser.

$('#file').change(function(e) {
    var fileReader = new FileReader(),
        file = e.target.files[0];

        if (typeof fileReader.readAsBinaryString == "function") {
            // section #1
            var binaryString, base64;

            fileReader.onload = function(readerEvt) {
                binaryString = readerEvt.target.result;
                base64 = 'data:'+type+';base64,'+btoa(binaryString);
                socket.emit('image', { image: base64, size: file.size, filename: file.name });
            }

            fileReader.readAsBinaryString(file);
        }else{

            // section #2 in IE 10, 11...
            var binary = "", bytes = e.target.result, length = bytes.length;

            for (var i=0; i<length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }

            // How can I control 'binary' variable for IE 10, 11

        }
});

I want to make it work the same as in Google Chrome.

Please implementing the source code into section #2.

回答1:

All though the documentation says that the readAsBinaryString function is defined, but it still gives Can't be resolved and function definition not found errors.

You can try this code. It has worked for me. Please refer my comments for the help.

I have tested the code in IE 11 and Chrome.

Html Code

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <input type="file" id="files" onchange="handleFileSelect(event)"/>
    <output id="list"></output>
</body>
</html>

Javascript Code

//readAsBinaryString function is not defined in IE
//Adding the definition to the function prototype
if (!FileReader.prototype.readAsBinaryString) {
    console.log('readAsBinaryString definition not found');

    FileReader.prototype.readAsBinaryString = function (fileData) {
        var binary = '';
        var pk = this;
        var reader = new FileReader();

        reader.onload = function (e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;

            for (var i = 0; i < length; i++) {
                var a = bytes[i];

                var b = String.fromCharCode(a)
                binary += b;
            }

            pk.content = binary;
            $(pk).trigger('onload');
        }

        reader.readAsArrayBuffer(fileData);
    }
}

function handleFileSelect(evt) {
    console.log(evt);

    var reader = new FileReader();

    reader.onload = function(e){
        if (reader.result)
            reader.content = reader.result;

        //In IE browser event object is null
        var data = e ? e.target.result : reader.content;
        var baseEncoded = btoa(data);
        var wb = XLSX.read(baseEncoded, {type: 'base64'});

        processWorkbook(wb);
    };

    reader.onerror = function(ex){
        console.log(ex);
    };

    //I'm reading the first file
    //You can modify it as per your need
    console.log(evt.target.files[0]);

    reader.readAsBinaryString(evt.target.files[0]);
}

function processWorkbook(workbook) {

    console.log(workbook.Sheets['sheet_name']['excel_cell_name_to_be_accessed'].v);

    //For example
    console.log(workbook.Sheets['sheet1']['C2'].v);

    //you can iterate through all the sheets
    for(var i = 0; i < workbook.SheetNames.length; i++) {
        workbook.SheetNames[i]['cell_name_to_be_accessed'] //rest of the processing
    }

    //You can now work with the workbook as per your requirements
}

来源：https://stackoverflow.com/questions/31086243/filereader-readasbinarystring-is-not-support-ie-10-11

标签

javascript

filereader

FileReader.readAsBinaryString() is not support IE 10, 11

夙愿已清 — Wed, 10 Feb 2021 17:43:13 +0000

FileReader.readAsBinaryString() is not support IE 10, 11 夙愿已清 2021-02-11 01:43:13

问题

The below code works in chrome browser.

$('#file').change(function(e) {
    var fileReader = new FileReader(),
        file = e.target.files[0];

        if (typeof fileReader.readAsBinaryString == "function") {
            // section #1
            var binaryString, base64;

            fileReader.onload = function(readerEvt) {
                binaryString = readerEvt.target.result;
                base64 = 'data:'+type+';base64,'+btoa(binaryString);
                socket.emit('image', { image: base64, size: file.size, filename: file.name });
            }

            fileReader.readAsBinaryString(file);
        }else{

            // section #2 in IE 10, 11...
            var binary = "", bytes = e.target.result, length = bytes.length;

            for (var i=0; i<length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }

            // How can I control 'binary' variable for IE 10, 11

        }
});

I want to make it work the same as in Google Chrome.

Please implementing the source code into section #2.

回答1:

All though the documentation says that the readAsBinaryString function is defined, but it still gives Can't be resolved and function definition not found errors.

You can try this code. It has worked for me. Please refer my comments for the help.

I have tested the code in IE 11 and Chrome.

Html Code

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <input type="file" id="files" onchange="handleFileSelect(event)"/>
    <output id="list"></output>
</body>
</html>

Javascript Code

//readAsBinaryString function is not defined in IE
//Adding the definition to the function prototype
if (!FileReader.prototype.readAsBinaryString) {
    console.log('readAsBinaryString definition not found');

    FileReader.prototype.readAsBinaryString = function (fileData) {
        var binary = '';
        var pk = this;
        var reader = new FileReader();

        reader.onload = function (e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;

            for (var i = 0; i < length; i++) {
                var a = bytes[i];

                var b = String.fromCharCode(a)
                binary += b;
            }

            pk.content = binary;
            $(pk).trigger('onload');
        }

        reader.readAsArrayBuffer(fileData);
    }
}

function handleFileSelect(evt) {
    console.log(evt);

    var reader = new FileReader();

    reader.onload = function(e){
        if (reader.result)
            reader.content = reader.result;

        //In IE browser event object is null
        var data = e ? e.target.result : reader.content;
        var baseEncoded = btoa(data);
        var wb = XLSX.read(baseEncoded, {type: 'base64'});

        processWorkbook(wb);
    };

    reader.onerror = function(ex){
        console.log(ex);
    };

    //I'm reading the first file
    //You can modify it as per your need
    console.log(evt.target.files[0]);

    reader.readAsBinaryString(evt.target.files[0]);
}

function processWorkbook(workbook) {

    console.log(workbook.Sheets['sheet_name']['excel_cell_name_to_be_accessed'].v);

    //For example
    console.log(workbook.Sheets['sheet1']['C2'].v);

    //you can iterate through all the sheets
    for(var i = 0; i < workbook.SheetNames.length; i++) {
        workbook.SheetNames[i]['cell_name_to_be_accessed'] //rest of the processing
    }

    //You can now work with the workbook as per your requirements
}

来源：https://stackoverflow.com/questions/31086243/filereader-readasbinarystring-is-not-support-ie-10-11

标签

javascript

filereader

Image/Video Preview In Angular

依然范特西╮ — Wed, 10 Feb 2021 08:49:26 +0000

Image/Video Preview In Angular 依然范特西╮ 2021-02-10 16:49:26

问题

I'm trying to upload image or video in Angular. I wanted to display its preview. I have no problem in previewing the image, my problem is how can i preview the video? Please see this stackblitz link:

CLICK HERE

CODE

 onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = (event) => {
        this.url = event.target.result;
      }
    }
  }

回答1:

You can decide if the file is type of video/image and then forward it to suitable html controls

<img [src]="url" *ngIf="format==='image' && url" height="200"> <br/>
<video [src]="url" *ngIf="format==='video' && url" height="200" controls></video> <br/>
<input type='file' (change)="onSelectFile($event)" />

onSelectFile(event) {
  const file = event.target.files && event.target.files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    if(file.type.indexOf('image')> -1){
      this.format = 'image';
    } else if(file.type.indexOf('video')> -1){
      this.format = 'video';
    }
    reader.onload = (event) => {
      this.url = (<FileReader>event.target).result;
    }
  }
}

Updated Stackblitz: https://stackblitz.com/edit/angular-video-or-image-upload-preview-fjsukm

来源：https://stackoverflow.com/questions/58046879/image-video-preview-in-angular

标签

Installing FileReaderSync in Angular2

南楼画角 — Mon, 08 Feb 2021 11:39:14 +0000

Installing FileReaderSync in Angular2 南楼画角 2021-02-08 19:39:14

问题

How do I install FileReaderSync in Angular2?

It appears in the file node_modules/typescript/lib/lib.webworker.d.ts but not can use it.

The FileReader I can use it without having to import anything.

I need to do something different with FileReaderSync?

error TS2304: Cannot find name 'FileReaderSync'.

回答1:

I had the same issue few months ago, the solution was to write custom typings.

main.bowser.d.ts

interface FileReaderSync {
  readAsArrayBuffer(blob: Blob): any;
  readAsBinaryString(blob: Blob): void;
  readAsDataURL(blob: Blob): string;
  readAsText(blob: Blob, encoding?: string): string;
}

declare var FileReaderSync: {
  prototype: FileReaderSync;
  new(): FileReaderSync;
};

and include them when you bootstrap angular2

// <reference path="./main.browser.d.ts" />

I wrote an article about this just now :D http://icode.co/angular2/php/2016/12/21/async-file-streaming-from-JS-to-PHP-WebWorkers.html

来源：https://stackoverflow.com/questions/39807671/installing-filereadersync-in-angular2

标签

angular

typescript

filereader

Convert Input File to Base64 in Angular 2 without using FileReader In Ionic V2

﹥＞﹥吖頭↗ — Mon, 08 Feb 2021 00:32:39 +0000

Convert Input File to Base64 in Angular 2 without using FileReader In Ionic V2 ﹥＞﹥吖頭↗ 2021-02-08 08:32:39

问题

I am having an issue converting the input file object into Base64 in my ionic v2 app. The issue occurs specifically when using the onload/onloadend reader as it gets called only occasionally (rarest of rarest to be very specific).

I am able to get the file name, size and object when the user clicks on a image file which triggers the attachFile function, but after that when i convert the file object to Base64 using FileReader - onload or onloadend the callback function rarely gets called and the file object is not getting converted to Base64 as a result of this.

File input:

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

Attach File:

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 Conversion:

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

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

      console.log(reader.result);
    }

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

I can understand if this doesn't work altogether, but there are some rare instances where the onload/onloadend callback gets called and successfully converts the object to Base64 in my Android phone.

None of the callbacks are called including onerror unless the rarest of rarest occasions like I mentioned before.
The same code in the web browser works perfectly fine and the callbacks successfully gets called and converts the file object to Base64.

So this leaves me with very little options and I am unable to find a decent Base64 conversion plugin tailor made for angular 2 as most of the plugins around are for only the old angular.

One such plugin for angular had much promise - angular-base64-upload but I am unable to figure it out on how to run it in angular 2 as the instructions are specifically for the old angular.

Surely there must be a way to achieve this requirement, any leads would be highly appreciated.

My requirement is also such that the Base64 conversion plugin shouldn't be dependant upon any file path and should directly convert the file object got from file input selected by the user.

P.S: I already saw all the answers in stackoverflow with respect to the FileReader callbacks and none has worked for me so far.

回答1:

Check this . https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview

Template

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

Component:

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

Edit : Regarding this not working in Mobile, it seems to be known issues in ionic. https://github.com/driftyco/ionic-native/issues/505

Things you can try

Loading zone.js before cordova.js also fixes it.

Specific to ionic2 maintain this sequence order.

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

as the polyfills.js executes the zone.js.

回答2:

when i tried the previous solution the base 64 wasn't complete The html part

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

the component side

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

}

the console.log output gives a full base64 code, when you put the base64 in the src of an image you'll get the image

来源：https://stackoverflow.com/questions/43733866/convert-input-file-to-base64-in-angular-2-without-using-filereader-in-ionic-v2

标签

FileReader memory leak in Chrome

与世无争的帅哥 — Sat, 06 Feb 2021 19:51:40 +0000

FileReader memory leak in Chrome 与世无争的帅哥 2021-02-07 03:51:40

问题

I have a webpage with file upload functionality. The upload is performed in 5MB chunks. I want to calculate hash for each chunk before sending it to the server. The chunks are represented by Blob objects. In order to calculate the hash I am reading such blob into an ArrayBuffer using a native FileReader. Here is the code:

var reader = new FileReader();

var getHash = function (blob, callback) {
    reader.onloadend = function (e) {
        var hash = util.hash(e.target.result);
        callback(hash);
    };
    reader.readAsArrayBuffer(blob);
}

var processChunk = function (chunk) {
    if (chunk) {
        getHash(chunk, function (hash) {
            util.sendToServer(chunk, hash, function() {
                // this callback is called when chunk upload is finished
                processChunk(chunks.shift());
            });
        });
    }
}

var chunks = file.splitIntoChunks(); // gets an array of blobs
processChunk(chunks.shift());

The problem: using the FileReader.readAsArrayBuffer seems to eat up a lot of memory which is not released. So far I tested with a 5GB file on following browsers:

Chrome 55.0.2883.87 m (64-bit): the memory goes up to 1-2GB quickly and oscillates around that. Sometimes it goes all the way up and browser tab crashes. It can use more memory than the size of read chunks. E.g. after reading 500MB of chunks the process already uses 700MB of memory.
Firefox 50.1.0: memory usage oscillates around 300-600MB

Code adjustments I have tried - all to no avail:

re-using the same FileReader instance for all chunks (as suggested in this question)
creating new FileReader for each chunk
adding timeout before starting new chunk
setting the FileReader and the ArrayBuffer to null after each read

The question: is there a way to fix the problem? Is this a bug in the FileReader implementations or am I doing something wrong?

EDIT: Here is a JSFiddle https://jsfiddle.net/andy250/pjt9udeu/

回答1:

This is a bug in Chrome on Windows. It is reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=674903

来源：https://stackoverflow.com/questions/41181923/filereader-memory-leak-in-chrome

标签