使用角度 8 上传图片答案

【问题标题】：Upload Image With angular 8使用角度 8 上传图片
【发布时间】：2020-02-17 12:42:19
【问题描述】：

我在文件“../src/app/assets/”中上传图片时遇到问题。我有这个表格

 <form [formGroup]="formRegister" novalidate="">  
    <div class="form-group">
        <label for="exampleInputImage">Image</label>
        <input type="file" (change)="onFileSelect($event)" name="image" 
           class="form-control" placeholder="Enter votre image">
    </div>
</form>
<button type="button" (click)="onRegister()">Submit</button>

在我的 ts 中

formRegister: FormGroup;
errorMail: string = "";
selectedFile: File = null;

constructor(private appService: AppServiceService, private http: HttpClient) { }

ngOnInit() {
this.formRegister = new FormGroup({      
  image: new FormControl('', [Validators.required])
});
}


onFileSelect(event) {
  console.log("event : ", event);
  this.selectedFile = <File>event.target.files[0];
 }

onRegister(): void {
const fd = new FormData();
fd.append('image', this.selectedFile);
const req = new HttpRequest('POST', '../src/app/assets/', fd);
this.http.request(req).subscribe(events => {
  console.log("Upload Image", events);
},
  (err: HttpErrorResponse) => {
    console.log("Erreur : ", err.message);    // Show error, if any.
  });
}

在我的控制台中我有一个错误： http://localhost:4200/src/app/assets/404（未找到）

我的代码哪里出了问题，谢谢。

【问题讨论】：

你不能HTTP POST一个文件到一个文件夹，它必须是一个服务器。
如何将图像放入我的文件中？我要安装服务器？还是将 HTTP 替换为另一个 cmd？
如果您的目的是让所有访问您网站的人都可以使用上传的图片，那么您必须有一个服务器来接收请求并保存文件。
你有这个想法的教程吗？

标签： angular typescript image-upload

【解决方案1】：

不可能在只有角度的文件夹中应用图像。可以将图片转换成base64并注册成字符串。

当你想在文件夹中应用图像时，需要使用服务器（Node Js，spring boot ...）

谢谢

【讨论】：