Question

我在尝试从我的前端上传照片时遇到了问题。

我有一个输入文件，我可以从我的电脑中选择一个文件。

我想要的是将照片发送到我的后端并将其存储为Blob。

首先我尝试获取文件并保存为Blob：

foto: Blob;
setFoto(event){
    this.foto = event.target.files[0];
}

但我不知道这是否正确。

第二我发送＆＃34; this.foto＆＃34;使用HTTP post发送到服务器并将我的数据库保存为blob。我认为我的问题是我没有发送有关照片的正确信息。

在简历中，我想要的是将我从计算机中选择的图像发送到服务器，但是我无法获得照片的正确信息。

成立解决方案

首先，这是我的意见：

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

其次，这是您选择照片时调用的方法。

setFoto(event) {
    const foto = new Blob([event.target.files[0]]);
    var reader = new FileReader();
    reader.readAsDataURL(foto);
    reader.onloadend = () => {
      this.foto = reader.result;
    }
 }

this.foto是一个字符串。然后，当我点击更新按钮时，我将新照片作为网址发送，并将其作为文本保存在我的数据库（Mysql）中。

updateApuesta() {
  this.userService.updateBet(this.url, {
    id: this.userService.getIdbet(), 
    coste: this.coste, 
    beneficio: this.beneficio,
    foto: this.foto
  }).subscribe(this.success.bind(this), this.error);
}

当我尝试从我的服务器上获取照片时，我会使用它。我打电话给我的http get服务并获取照片。

首先，新图像是

image: SafeResourceUrl;

我分配了从服务器获取的数据。

this.image = this.sanitizer.bypassSecurityTrustResourceUrl(data.foto);

您必须导入：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

并将其传递给您的构造函数：

constructor(private sanitizer:DomSanitizer ) { }

最后，你在this.image中获得了一个SafeResourceUrl类型的图像。要加载它你必须这样做：

<img [src]="bet.foto"/>

在你的情况下bet.foto将是你的。你必须传递给模板的图像。

Answer 1

this.userService.updateBet(
this.url,{foto:this.foto}).subscr‌ibe(this.success.bin‌d(this), this.error);

，服务是：

 updateBet(url, body) {
    return this.httpRequest.put(url, body, this.options);
  }

  put(url, body, options) {
    return this.http.put(url, body, this.setOptions(options))
      .map(this.extractData)
      .catch((error: any) => Observable.throw(error.json().error || 'Server error')); //Show errors if any
  }

但是我说的，我想我没有发送有关照片的正确信息。

如何使用Angular2将Blob图像发送到NodeJ？

成立解决方案

1 个答案: