我想在html
中显示文件上传进度,但是在控制台中看不到它却没有显示。此行为的可能原因是什么?
如果我执行console.log(this.progress)
,则可以在控制台中看到它,但不能在html {{progress}}
中看到
html
<div class="document-upload-tab">
<button mat-button (click)="select()">
<img src="assets/svg/cloud-upload.svg" /> {{text}}
</button>
<br/>
<input type="file" id="fileUpload" name="fileUpload" accept="application/pdf,application/vnd.ms-excel" style="display:none;"
/>
<button mat-raised-button (click)="save()">
Save
</button>
</div>
<ng-container *ngIf="fileSelected">
{{progress}}percentage
<mat-progress-bar [value]="progress"></mat-progress-bar>
</ng-container>
ts
select() {
console.log('here');
const fileUpload = document.getElementById(
'fileUpload'
) as HTMLInputElement;
console.log(fileUpload);
fileUpload.onchange = () => {
this.file = fileUpload.files.item(0);
};
fileUpload.click();
}
save() {
console.log(this.file);
this.fileSelected = true;
this.uploadfile(this.file)
.then(res => {
console.log(res);
})
.catch(err => {
this.toastr.info('', 'Error while uploading file!', {
positionClass: 'toast-top-center',
closeButton: true
});
});
}
uploadfile(file) {
console.log(file);
const bucket = new S3({
accessKeyId: environment.accessKeyId,
secretAccessKey: environment.secretAccessKey,
region: environment.region
});
const params = {
Bucket: environment.Bucket,
Key: file.name,
Body: file
};
const options = {
// Part Size of 10mb
partSize: 10 * 1024 * 1024,
queueSize: 1,
// Give the owner of the bucket full control
ACL: 'bucket-owner-full-control'
};
const upload = bucket
.upload(params, options)
.on('httpUploadProgress', function(event) {
this.progress = Math.round((event.loaded / event.total) * 100);
console.log(this.progress);
this.toastr.info(this.progress);
return event;
});
const promise = upload.promise();
return promise;
}
最佳答案
将httpUploadProgress回调函数更改为Arrow函数。似乎没有绑定此类。
const upload = bucket.upload(params, options)
.on('httpUploadProgress', (event) => { // change here
this.progress = Math.round((event.loaded / event.total) * 100);
console.log(this.progress);
this.toastr.info(this.progress);
return event;
});