我在我的 html 中声明一个 FileUpload,如下
<p-fileUpload name="file" url="http://localhost:8080/integra/services/upload" (onUpload)="onUpload($event)" accept=".txt"></p-fileUpload>
它指向我的后端
@PostMapping(value="/upload", produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
File convertFile = new File("C:\\upload\\"+file.getOriginalFilename());
convertFile.createNewFile();
FileOutputStream fout = new FileOutputStream(convertFile);
fout.write(file.getBytes());
fout.close();
return new ResponseEntity("OK", HttpStatus.OK);
}
但是当在我的 typescript 中执行 onload 事件时,它不起作用......甚至放置了一个 console.log 来测试,但它不起作用。 这是我的 typescript
onUpload(event) {
console.log(event.files.length);
console.log(event.progress);
}
当我运行文件上传时,加载栏被卡住,不允许我执行另一个文件上传。因此,当加载栏从未完成时,不会执行上述事件 enter image description here
最后,文件保存在上述路径中,但我无法正确处理事件
如果有人能帮助我,我将不胜感激。 谢谢
最佳答案
我在使用“onUpload”方法时遇到了同样的问题(对我来说不起作用),您可以使用 uploadHandler
和 customUpload="true"
代替,它有效就像一个魅力!
这里是一些示例代码:
HTML
```
<p-fileUpload #fileInput
name="files"
(uploadHandler)="onUpload($event)"
customUpload="true"
></p-fileUpload>
```
TS
onUpload(event) {
console.log('onUpload', event);
}
关于angular - Primeng的p-fileUpload中没有运行onUpload方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58312827/