[英]p-fileUpload does not work more than once primeng
我将尝试解释这个组件发生了什么,我已经这样定义了组件
<p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event)">
在我的包 Json 上,我有这个“primeng”:“^4.1.0-rc.3”,并且在 js 文件中有这个方法
uploadFile(event) {
for (let file of event.files) {
this.uploadedFiles.push(file);
}
this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => {
this.fileInfo = x;
..do some stuff..
});
}
它第一次按预期工作(显示组件选择、上传和取消的 3 个按钮)并让我从弹出窗口中选择文件,然后该过程继续调用 uploadFile 方法; 问题是,一旦它完成,如果我尝试再次上传同一个文件,它不允许我这样做。 它只允许我选择文件,但从不启用上传按钮,当然,从不调用 uploadFile 方法。 但是如果我选择另一个不同于以前的文件,它会按预期工作,这意味着调用 uploadFile 方法。
我正在使用
this.fileUpload.clear();
只是为了清除向用户显示上传文件的部分
有什么建议吗?
我想这个问题可能已经解决了,但为了供开发人员将来参考,请在下面找到解决方案。
解决方法和解释请参考:[ https://github.com/primefaces/primeng/issues/4018][1]
请将模板变量传递给组件,然后使用该变量清除。
例如:
HTML文件:
<p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event,fileUpload)">
组件文件:
uploadFile(event,fileUpload) {
for (let file of event.files) {
this.uploadedFiles.push(file);
}
this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => {
this.fileInfo = x;
..do some stuff..
});
fileUpload.clear(); // this will clear your file
}
这有效。
Html :(参考即 #fileUpload )
<p-fileUpload #fileUpload mode="basic" name="upload[]" maxFileSize="1000000" (onSelect)="onFileChange($event)" chooseLabel="Upload" auto="auto"></p-fileUpload>
TS:(使用参考进行操作):
@ViewChild('fileUpload') fileUpload: any;
在需要清除 fileUpload 时调用 clear 方法并执行以下操作:
clear(){
this.fileUpload.clear();
}
和 onFileChange($event) 将像往常一样工作,如下所示:
onFileChange(event) {
for(let file of event.files) {
this.customUploadedFiles.push(file);
}
}
我看到使用“this.fileUpload.clear()”的问题。 用下面的代码替换“this.fileUpload.clear()”。
this.fileUpload.files.forEach((value, index) => {
this.fileUpload.files.splice(index, 1);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.