Material components web components mwc-按钮上传文件

Question

我想使用mwc-button从material web components库上传一个文件。我怎样才能把它和<input type="file" />结合起来，这样我就有了输入上传功能，但又带有mwc-button的样式？以下是我到目前为止所掌握的：

<input type="file" />
<mwc-button
  label="Upload Data"
  raised
  icon="publish"
  @click=uploadFile
></mwc-button>

Answer 1

您可以执行以下操作：

<input id="file-upload" type="file"  hidden/>
<mwc-button
  label="Upload Data"
  icon="publish"
  raised
  @click=${() => {
    const input = document.querySelector("#file-upload");
    input.click();
  }}
  >
</mwc-button>