以角度压缩上传图像答案

【问题标题】：compress image on upload in angular以角度压缩上传图像
【发布时间】：2018-05-25 22:05:48
【问题描述】：

我想向产品和用户上传图片。所以我将图像转换为base64字符串并发送它。但是，当所选图像很大时，由于base64字符串太大，图像不会上传。

代码如下：

HTML

<input type="file" (change)="onFileSelected($event)">
<button  type="submit" title="upload" (click)="uploadImage()"></button>

TS 文件

onFileSelected(event){
var files = event.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));
}

我只是接受选择的图像。那么，有没有办法在选择后压缩图像或减少base64字符串以便上传图像。谢谢！！提前。

【问题讨论】：

标签： html angular image typescript base64

【解决方案1】：

在 Angular 中，您可以上传图片而不将其转换为 base64。检查这个...

import { ViewChild }            from '@angular/core';

export class yourComponent { 

    @ViewChild('fileInput') fileInput;
    .
    .
    .
}

uploadImage(){
    let fileBrowser = this.fileInput.nativeElement;
    if (fileBrowser.files && fileBrowser.files[0]) {

        console.log(fileBrowser.files[0]);
        const formData = new FormData();
        formData.append("userId", this.userId );            //appending userId in formData
        formData.append("image", fileBrowser.files[0]);     //appending image in formData
        this.apiService.UploadImageMethod(formData)
        .subscribe(
            response=>{
                console.log(response);
                if(response.status == 'success'){
                    console.log(response);
                } 
            },
            err  => {
                this.imageErrorMsg = <any>err.message;
                console.log(this.imageErrorMsg);
            }
        );          
    }
}

HTML:
<input type="file" id="fileInput" (click)="hideErrorMsg()" accept="image/*" #fileInput>

在 API 中，您可以通过这种方式获取图像数据。 (PHP)

UploadImageMethod(){
    $fileName   = request()->image->getClientOriginalExtension();
    $ext        = strtolower(request()->image->getClientOriginalExtension());
}

祝你好运！！！

【讨论】：