在Angular 5中,可以使用以下步骤创建一个图像上传器:
image-uploader.component.ts
。image-uploader.component.html
中添加一个文件选择器和一个上传按钮:
image-uploader.component.ts
中,添加以下代码:import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-image-uploader',
templateUrl: './image-uploader.component.html',
styleUrls: ['./image-uploader.component.css']
})
export class ImageUploaderComponent {
selectedFile: File;
constructor(private http: HttpClient) {}
onFileSelected(event): void {
this.selectedFile = event.target.files[0];
}
onUpload(): void {
const fd = new FormData();
fd.append('image', this.selectedFile, this.selectedFile.name);
this.http.post('your-upload-url', fd)
.subscribe(res => {
console.log(res);
});
}
}
HttpClientModule
:import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
],
// ...
})
export class AppModule { }
your-upload-url
为实际的图像上传URL。这样,当用户选择一个图像文件后,点击上传按钮时,图像文件将被上传到指定的URL。可以根据需要进一步处理上传后的响应。