在 Angular (8.x) 中,可以使用 HttpClient 来实现文件上传,并且可以通过监听上传进度来获取文件上传的进度信息。以下是一个示例代码:
import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http';
constructor(private http: HttpClient) { }
uploadFile(file: File) {
const formData = new FormData();
formData.append('file', file);
const uploadUrl = 'your-upload-url';
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
const req = new HttpRequest('POST', uploadUrl, formData, {
headers: headers,
reportProgress: true // 开启上传进度监听
});
return this.http.request(req).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
const progress = Math.round(100 * event.loaded / event.total);
console.log(`File is ${progress}% uploaded.`);
} else if (event.type === HttpEventType.Response) {
console.log('File upload complete.', event.body);
}
});
}
在上述代码中,我们使用了 HttpRequest
对象来进行文件上传,并通过 reportProgress
选项来开启上传进度监听。在监听事件中,我们可以通过 event.loaded
和 event.total
来计算上传进度的百分比。
在使用上述代码时,需要将 'your-upload-url'
替换为实际的文件上传接口地址。
希望以上解决方法可以帮助到你!
上一篇:Angular (8):Custom-Auth-Module应该处理/封装一个外部的OAuth-Module(通过forRoot-import导入),并为OAuth-Service提供一个包装器服务。