ค้นหาเว็บไซต์

angular - เมธอด onUpload ไม่ทำงานใน p-fileUpload ของ Primeng


ฉันกำลังประกาศ FileUpload ใน HTML ของฉันดังนี้

<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);
    }

แต่เมื่อรันเหตุการณ์ onload ของฉันใน TypeScript มันใช้งานไม่ได้ ... และแม้แต่การวาง console.log เพื่อทดสอบก็ไม่ทำงาน นี่คือ TypeScript ของฉัน

  onUpload(event) {
    console.log(event.files.length);
    console.log(event.progress);
  }

เมื่อฉันรันการอัปโหลดไฟล์ แถบการโหลดติดค้างและไม่อนุญาตให้ฉันทำการอัปโหลดไฟล์อื่นได้ ดังนั้น เมื่อแถบการโหลดไม่เสร็จสิ้น เหตุการณ์ที่กล่าวถึงก็จะไม่ถูกดำเนินการ ใส่คำอธิบายรูปภาพที่นี่

สุดท้าย ไฟล์ก็ถูกบันทึกในเส้นทางที่กล่าวถึง แต่ฉันไม่สามารถจัดการกับเหตุการณ์ได้อย่างถูกต้อง

ฉันจะรู้สึกขอบคุณหากมีใครสามารถช่วยฉันได้ ขอบคุณ

คำตอบ #1

ฉันกำลังเผชิญปัญหาเดียวกันกับวิธี 'onUpload' (มันใช้กับฉันไม่ได้) คุณสามารถใช้ uploadHandler และ customUpload="true" แทน มันทำงานได้ราบรื่นมาก!

นี่คือตัวอย่างโค้ดบางส่วน:

HTML

```
<p-fileUpload #fileInput
  name="files" 
  (uploadHandler)="onUpload($event)"
  customUpload="true"
></p-fileUpload>
```

TS

  onUpload(event) {
    console.log('onUpload', event); 
  }