Question

将图像转换为角度为2的base64，图像从本地上传。当前我正在使用fileLoadedEvent.target.result。问题是，当我通过REST服务将此base64字符串发送到java时，它无法对其进行解码。当我尝试这个base64字符串与免费在线编码器解码器，我也看不到解码图像。我也试过用画布。没有得到正确的结果。有一件事是肯定base64字符串得到的是不正确的，我需要为此添加任何包吗？或者在角度2中，有任何特定的方式将图像编码为base64，就像在角度1 - angular-base64-upload包中一样。

请在我的示例代码下面找到

onFileChangeEncodeImageFileAsURL(event:any,imgLogoUpload:any,imageForLogo:any,imageDiv:any)
{
    var filesSelected = imgLogoUpload.files;
    var self = this;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0]; 

      //Reading Image file, encode and display
       var  reader: FileReader = new FileReader();
       reader.onloadend = function(fileLoadedEvent:any) {

       //SECOND METHO
       var imgSrcData = fileLoadedEvent.target.result; // <--- data: base64 

        var newImage = imageForLogo;
        newImage.src = imgSrcData;
        imageDiv.innerHTML = newImage.outerHTML;

      }
      reader.readAsDataURL(fileToLoad);
    }
}

Answer 1

为base64字符串工作plunkr

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

begin
    # do some stuff here
rescue Exception => e
    flash[:notice] = e.message
end

Answer 2

我修改了Parth Ghiya的答案，所以你可以上传1到多个图像，并且它们都作为base64编码字符串存储在数组中

base64textString = [];

onUploadChange(evt: any) {
  const file = evt.target.files[0];

  if (file) {
    const reader = new FileReader();

    reader.onload = this.handleReaderLoaded.bind(this);
    reader.readAsBinaryString(file);
  }
}

handleReaderLoaded(e) {
  this.base64textString.push('data:image/png;base64,' + btoa(e.target.result));
}

HTML文件

<input type="file" (change)="onUploadChange($event)" accept=".png, .jpg, .jpeg, .pdf" />
<img *ngFor="let item of base64textString"  src={{item}} alt="" id="img">

Answer 3

您是否尝试过使用btoa或Crypto.js将图像编码为base64？

指向cryptojs的链接 - https://code.google.com/archive/p/crypto-js/

var imgSrcData = CryptoJS.enc.Base64.stringify(fileLoadedEvent.target.result);

或 // 2 - because frame border is on the bottom and on the top. QImage *background = new QImage(back->scaledToHeight(rec.height() - view->frameWidth() * 2));

Answer 4

另一个适用于base64的解决方案就像这篇文章 https://stackoverflow.com/a/36281449/6420568

在我的情况下，我做了

getImagem(readerEvt, midia){
    //console.log('change no input file', readerEvt);
    let file = readerEvt.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        //console.log('base64 do arquivo',reader.result);
        midia.binario = btoa(reader.result);
        //console.log('base64 do arquivo codificado',midia.binario);
    };
    reader.onerror = function (error) {
        console.log('Erro ao ler a imagem : ', error);
    };
}

和html组件

<input type="file" class="form-control"  (change)="getImagem($event, imagem)">

<img class="img-responsive"  src="{{imagem.binario | decode64 }}" alt="imagem..." style="width: 200px;"/>

显示图像，我创建了pipe decode64

@Pipe({
  name: 'decode64'
})
export class Decode64Pipe implements PipeTransform {
  transform(value: any, args?: any): any {
    let a = '';
    if(value){
       a = atob(value);
    }
    return a;
  }
}

Answer 5

我想出了一个答案，即使用json调用post方法的HTTP请求

1.event参数来自HTML输入标签。
2. self.imagesrc是一个组件变量，用于存储数据并在头文件中使用它，我们需要将“ this”转换为自变量，并在阅读器中使用它。加载功能
3. this.server是我在此组件中使用的API调用服务组件变量

UploadImages(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    var self = this;
    reader.onload = function() {
      self.imageSrc = reader.result.toString();
    };

    var image_data = {
      authentication_token: this.UD.getAuth_key ,
      fileToUpload: this.imageSrc,
      attachable_type: "Photo"
    };

    this.server.photo_Upload(image_data).subscribe(response => {
      if (response["success"]) {
        console.log(response);
      } else {
        console.log(response);
      }
    });
  }

Answer 6

请考虑使用以下软件包：image-to-base64

将图像生成为base64，您可以使用路径或url进行创建。

Or this accepted answer

Answer 7

这里是Parth Ghiya的相同代码，但以ES6 / TypeScript格式编写

picture: string;
handleFileSelect(evt){
    const file = evt.target.files[0];
    if (!file) {
        return false;
    }
    const reader = new FileReader();
    
    reader.onload = () => {
        this.picture = reader.result as string;
    };

    console.log(btoa(this.picture));
}

以角度2

7 个答案: