angular - 如何在 Angular 中触发文件上传输入？

Question

如何在 Angular 4 中触发文件上传输入？我正在尝试，但它不起作用。

我必须点击 div 并触发输入类型按钮，而不是输入按钮。

应用程序.html:

<input id="custom-input" type="file" > 
<div (click)="myEvent(custom-input)">
    Click here to upload file
</div>

应用.ts:

myEvent(event) {
    alert("event");
    event.nativeElement.click();
}

Answer 1

1. 创建文件上传输入:

<input 
    hidden 
    type="file" 
    #uploader
    (change)="uploadFile($event)"
/>

1. 创建一个按钮来触发对文件输入的点击:

<button (click)="uploader.click()">
    Upload
</button>

然后在你的组件中你可以使用$event:

uploadFile($event) {
    console.log($event.target.files[0]); // outputs the first file
}