材质组件web组件mwc-按钮上传文件

【问题标题】：Material components web components mwc-button upload file材质组件web组件mwc-按钮上传文件
【发布时间】：2020-05-22 16:20:51
【问题描述】：

我想使用材料 Web 组件库中的 mwc 按钮上传文件。如何将它与<input type="file" /> 结合使用，以便我具有输入上传功能但具有 mwc 按钮的样式？以下是我目前所拥有的：

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

【问题讨论】：

标签： javascript file-upload material-design web-component

【解决方案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>

【讨论】：