我要上传使用角V.7(也角材料如果它帮助)多个文件/图像,并以相同的FORMDATA将包括更多的数据,例如标题或部分文本。我管理的这一切工作了,但问题是我不能让报告进度按每个文件,而不是我得到的报告是所有文件一起作为一个报告。
我怎样才能解决这个问题?
HTML
<input type="file" id="mediaFile" #mediaFile multiple (change)="fileAdded($event)">
JS
this.selectedFiles: Files[] = [];
// when files are selected, save them in array selectedFiles
fileAdded(event) {
if(event.target.files.length){
for(let i=0 ; i < event.target.files.length ;i++){
this.selectedFiles.push(<File>event.target.files[i]);
}
}
}
// upload data
upload() {
this.message = "";
// stop here if form is invalid
if (this.shareForm.invalid) { this.message = "Fill the required fields"; return; }
this.formD = new FormData();
this.formD.append('firstname', this.shareForm.value.firstname);
this.formD.append('lastname', this.shareForm.value.lastname);
this.formD.append('position', this.shareForm.value.position);
if(this.selectedFiles.length){
for(let i=0 ; i < this.selectedFiles.length ; i++)
this.formD.append('files[]', this.selectedFiles[i],this.selectedFiles[i].name);
}
this.loading = true;
this.http.post<any>(myUrl, this.formD,{
reportProgress: true,
observe: 'events',
withCredentials:true
})
.subscribe(
res => {
console.log(res)
this.loading = false;
},
error => {
this.message = error.message;
this.loading = false;
}
);
}
我上传了两个文件,每一个约0.45MB,在控制台中我得到这个
{
loaded: 868352,
total: 976970,
type: 1
}
我希望,让每每个文件报告的进展,而不是对所有一起
reportProgress
将只针对相应的HTTP请求工作,所以调用函数http.post
与formD
表单数据对象时,它只会报告包含所有数据的特定要求的进展情况。
你将不得不分割文件上传到多个请求,以获得每个单独的上传过程的进展。这可以通过引入FormData
数组属性,其中每个阵列条目只包含一个单独的文件来实现。然后,你可以发射每个FormData
实例的请求,例如通过首先创建HTTP POST请求观测,然后通过RxJS forkJoin
运营商把它们合并。
const httpRequests = this.formDataObjects.map((formData) =>
this.http.post<any>(myUrl, formData,{
reportProgress: true,
observe: 'events',
withCredentials:true
})
);
forkJoin(httpRequests).subscribe(..*your subscription logic here..);