Bootstrap Angular中的图像上传

hs1rzwqc 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(171)

我试着用Angular上传一张图片到谷歌的存储桶里。用Postman的时候一切都很好。但是我被有Angular 的 typescript 卡住了。谁能给我一个建议吗？

.html文件

<input type="file" accept="image/png, image/jpeg" class="form-control upload-btn" formControlName="imageUpload" placeholder="Upload Images" (change)="uploadImage($event)"  required>

.ts文件

uploadImage(event: any) {
if (event.target.files && event.target.files[0]) {
  const uploadImage=event.target.files[0];

  const fileObject = {
    userId: this.userId,
    bucketName: 'Test123',
    image: uploadImage
  };

  this.userService.uploadImage(fileObject).subscribe(data=>{
  },err=>{
    console.log("error occured")
  }
  )
}

}

.服务文件

uploadImage(fileObject: any){
return this.http.post('http://localhost:1337' + 'upload-image' , fileObject);

}
没有任何错误发生在后端。它与 * Postman * 工作正常。我不确定**.ts**文件。

twitter-bootstrap

来源：https://stackoverflow.com/questions/71656450/image-uploading-in-angular

1条答案

按热度按时间

o2gm4chl1#

正如@PrasenjeetSymon所建议的，使用FormData将有助于在Angular中上传图像。
下面是similar thread，它演示了如何使用FormData
您可以使用HTML中的标记：

<input type="file" name="file" id="file" (change)="onFileChanged($event)" />

组件中：

public files: any[];

contructor() { this.files = []; }

onFileChanged(event: any) {
  this.files = event.target.files;
}

onUpload() {
  const formData = new FormData();
  for (const file of this.files) {
      formData.append(name, file, file.name);
  }
  this.http.post('url', formData).subscribe(x => ....);
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap Angular中的图像上传

1条答案

相关问题

热门标签

最新问答