Angular 提供了两种上传文件的方式:使用 HttpClient 发起 POST 请求和使用 FormData 对象实现。
在组件类中导入 HttpClient:
import { HttpClient } from '@angular/common/http';
在组件构造函数中注入 HttpClient:
constructor(private http: HttpClient) {}
然后创建一个 FormData 对象并添加要上传的文件:
const formData = new FormData(); formData.append('file', file);
最后使用 HttpClient 发起 POST 请求:
this.http.post('/api/upload', formData).subscribe(res => { console.log(res); });
在模板中添加一个 input[type=file] 元素:
在组件类中定义 onFileSelected 方法,该方法将选择的文件添加到 FormData 对象中:
onFileSelected(files: FileList) { const file = files[0]; const formData = new FormData(); formData.append('file', file); // ... }
然后使用 HttpClient 发起 POST 请求:
this.http.post('/api/upload', formData).subscribe(res => { console.log(res); });
注意:使用 FormData 上传文件时必须使用 POST 方法,否则会报错。另外,在实际项目中,还需要处理上传过程中的错误、显示进度条等问题。