javascript - Angular: Upload ExcelPdf file and convert it into BLOB before Post - Stack Overflow

admin管理员组

文章数量:1291721

I am currently using Angular on the Front-End and I need to upload a file using form and convert it to blob before sending the file to server.

What I actually want to do: I want upload a file from local system and then convert it to blob after doing some validations.

This is my HTML

<input type="file" (change)="changeFile($event)">

This is my method

changeFile(event) {
   console.log(event);
   var oReq = new XMLHttpRequest();
   oReq.open("GET", `/${event.target.files[0].name}`, true);
   oReq.responseType = "blob";

   oReq.onload = function(oEvent) {
     var blob = oReq.response;
     console.log(blob)
   };

   oReq.send();
}

It does convert it to blob but show an error as I am trying to make a get request when actually I am uploading file from my local system. It would be great if anyone can share relevant info or blog or whatever's helpful in order to achieve this.

I am currently using Angular on the Front-End and I need to upload a file using form and convert it to blob before sending the file to server.

What I actually want to do: I want upload a file from local system and then convert it to blob after doing some validations.

This is my HTML

<input type="file" (change)="changeFile($event)">

This is my method

changeFile(event) {
   console.log(event);
   var oReq = new XMLHttpRequest();
   oReq.open("GET", `/${event.target.files[0].name}`, true);
   oReq.responseType = "blob";

   oReq.onload = function(oEvent) {
     var blob = oReq.response;
     console.log(blob)
   };

   oReq.send();
}

It does convert it to blob but show an error as I am trying to make a get request when actually I am uploading file from my local system. It would be great if anyone can share relevant info or blog or whatever's helpful in order to achieve this.

• javascript
• angular
• typescript

Share Improve this question Follow asked Jan 24, 2019 at 7:27 Immad HamidImmad Hamid 78922 gold badges88 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Blob is almost a File with two less properties. In your case what you want to achieve can be achieved by this approach that I have mentioned below:

You can convert the file to base 64 and then to blob and in order to show it, you can convert it back to base64, like this:

HTML:

<input type="file" (change)="uploadFile($event)">

TS file:

changeFile(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

uploadFile(event) {
    if (event.target.value) {
        const file = event.target.files[0];
        const type = file.type;
        this.changeFile(file).then((base64: string): any => {
            console.log(base64);
            this.fileBlob = this.b64Blob([base64], type);
            console.log(this.fileBlob)
        });
    } else alert('Nothing')
}

Cheers! Happy Coding....

Just simply use to convert local file selected by user into blob

new Blob([fileSelectedFromLocalByUser])

changeFile($event: Event) {
    const files = ($event.target as HTMLInputElement).files;
    if(files) {
      const file = files[0];
      this.fileBlob = new Blob([file]);
   }
  }

本文标签： javascriptAngular Upload ExcelPdf file and convert it into BLOB before PostStack Overflow