Question

我想将图片上传到产品和用户。所以我将图像转换为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字符串以便上传图像。谢谢！！提前。

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

祝你好运!!!

压缩图像上传角度

1 个答案: