在Kendo Angular Upload中,可以通过设置autoUpload
属性为false
来禁止自动上传文件。这样,文件将不会在选择后立即上传,而是需要手动触发上传操作。
以下是一种实现方法:
<button (click)="uploadFiles()">上传文件</button>
UploadEvent
和removeFile
方法,并在uploadFiles
方法中获取上传组件的实例,并调用upload
方法来触发文件上传。import { Component } from '@angular/core';
import { UploadEvent, removeFile } from '@progress/kendo-angular-upload';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent {
public files: any[] = [];
public uploadFiles(): void {
const upload = this.uploadComponent.upload;
upload.uploadFiles();
}
public onUpload(event: UploadEvent): void {
this.files.push(...event.files);
}
public onRemove(event: removeFile): void {
const index = this.files.findIndex(file => file.uid === event.file.uid);
if (index >= 0) {
this.files.splice(index, 1);
}
}
}
在上述代码中,uploadComponent
是通过ViewChild
装饰器获取到的上传组件的实例。
autoUpload
属性设置为false
,并绑定onUpload
和onRemove
事件处理程序。<kendo-upload
#uploadComponent
[autoUpload]="false"
(upload)="onUpload($event)"
(remove)="onRemove($event)"
></kendo-upload>
通过以上步骤,你可以在Kendo Angular Upload中实现在单独的按钮上发布上传的文件而不是自动上传。
领取专属 10元无门槛券
手把手带您无忧上云