Vue 或 Vuetify 文件夹选择答案

【问题标题】：Vue or Vuetify folder selectVue 或 Vuetify 文件夹选择
【发布时间】：2020-12-15 06:24:23
【问题描述】：

在我的应用程序中，我需要用户选择一个文件夹，然后获取目录路径并将其用作其他地方的字符串。有没有一种相对简单的方法来拥有一个文件夹选择器？我目前正在使用 vuetify，并且在寻找要上传的文件时出现以下情况

<v-file-input
      prepend-icon="mdi mdi-paperclip"
      ref="filepath"
      label="Filepath"
      :error-messages="filepathErrors"
      hint="The filepath for the file to be processed"
      required
 ></v-file-input>

然后我只在需要的地方使用 ref。有没有一种简单的方法可以将其更改为文件夹输入？

【问题讨论】：

使用当前的 HTML 规范（和浏览器实现）只能选择一个文件 - 而不是一个文件夹。并且 File 对象 (developer.mozilla.org/en-US/docs/Web/API/File) 只公开文件名而不公开路径/文件夹。

标签： vue.js vuetify.js

【解决方案1】：

vuetify 将 props 发送到底层输入。如果你使用 webkit，你可以这样做

<v-file-input webkitdirectory>

这适用于 chrome 和 electron，但不适用于所有/旧版浏览器

【讨论】：