在Angular 7中,可以使用FormData对象来上传多个文件并附带其他数据,并使用HttpClient来报告上传进度。下面是一个示例代码:
首先,创建一个名为file-upload.service.ts
的服务文件,其中包含上传文件和报告进度的方法:
import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class FileUploadService {
constructor(private http: HttpClient) { }
uploadFiles(files: File[], data: any): Observable>> {
const formData = new FormData();
// 将文件添加到FormData对象中
for (let i = 0; i < files.length; i++) {
formData.append(`file${i}`, files[i], files[i].name);
}
// 将其他数据添加到FormData对象中
for (const key in data) {
if (data.hasOwnProperty(key)) {
formData.append(key, data[key]);
}
}
// 创建一个HttpRequest对象,用于发送FormData对象
const req = new HttpRequest('POST', 'your-upload-url', formData, {
reportProgress: true // 启用进度报告
});
// 发送请求并返回进度报告
return this.http.request(req);
}
}
然后,在组件中使用FileUploadService来处理文件上传和进度报告:
import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';
import { HttpEventType, HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css'],
providers: [FileUploadService]
})
export class FileUploadComponent {
selectedFiles: File[];
progress: number;
message: string;
constructor(private uploadService: FileUploadService) { }
// 文件选择事件
onFileChange(event): void {
this.selectedFiles = event.target.files;
}
// 文件上传事件
upload(): void {
this.progress = 0;
// 上传文件和数据,并订阅进度报告
this.uploadService.uploadFiles(this.selectedFiles, { someData: 'your-data' }).subscribe(
event => {
if (event.type === HttpEventType.UploadProgress) {
// 计算上传进度
this.progress = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
// 上传完成,处理响应
this.message = event.body.message;
}
},
error => {
// 处理错误
console.log(error);
}
);
}
}
最后,在模板中使用元素来选择文件,并在点击上传按钮时调用
upload()
方法:
{{ progress }}%
{{ message }}
请注意替换代码中的your-upload-url
为实际的上传URL,并根据需要调整其他代码。