图片上传 Angular

Question

我正在尝试使用 Angular 将图像上传到 google 存储桶。 Postman 一切正常。但我坚持使用 angular 打字稿。任何人都可以向我建议一种方法吗？

.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 文件。

Answer 1

正如@PrasenjeetSymon 所建议的那样，使用 FormData 将有助于在 Angular 中上传图像。

这里是演示如何使用 FormData

的 similar thread

You can use the tag from HTML:

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

and in the component:

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 => ....);
}

图片上传 Angular

Image uploading in Angular

javascript

angular

typescript

twitter-bootstrap

google-cloud-storage