vue 弹窗选择 文件夹 绝对路径

在 Vue 中弹窗选择文件夹并获取绝对路径，可以使用 HTML5 的 `Directory` 类型的 `input` 元素和 `webkitRelativePath` 属性来实现。

首先，在模板中添加一个 `input` 元素，并将其类型设置为 `Directory`：

<template>
  <div>
    <input type="directory" ref="dirInput" @change="onDirSelected" />
  </div>
</template>

然后，在 `methods` 中添加 `onDirSelected` 方法，该方法将在用户选择文件夹后被调用：

<script>
export default {
  methods: {
    onDirSelected(event) {
      const files = event.target.files;
      const filePath = files[0].webkitRelativePath;
      console.log(filePath);
    },
  },
};
</script>

在 `onDirSelected` 方法中，我们首先获取用户选择的文件夹，然后从中提取第一个文件的 `webkitRelativePath` 属性，该属性包含了文件夹的绝对路径。

注意，由于安全原因，浏览器可能会要求用户多次选择同一个文件夹，因此需要注意处理这种情况。