webkitdirectory 属性：选择文件夹内所有的文件

写在前面

要实现上传多个文件，不想多选文件？懒得解析压缩包？那么，webkitdirectory或许适合你。

HTMLInputElement.webkitdirectory 
是一个反应了 HTML 属性 webkitdirectory 的属性，其指示 <input> 元素应该让用户选择文件目录而非文件。

使用

// webkitdirectory 是用在input标签上的
// 为与组件库风格保持统一，可更改input样式
<input
  :multiple="false"
  type="file"
  webkitdirectory
  @change="uploadImageFolder"
/>

const uploadImageFolder = (event: any) => {
  // 此处 files 即对应的文件夹里的文件
  const files = event.target.files;
}

More

• webkitdirectory 为实验属性，需确认与浏览器是否兼容

你可以在 HTMLInputElement：webkitdirectory 属性 - Web API 接口参考 | MDN (mozilla.org) 找到更多