iinput获取: input上传文件夹获取及其子文件夹所有图片并获取本地图片所在路径

在 Web 开发中，尤其是使用 Vue.js 和 Element UI 时，通常的 <el-input> 组件是用于文本输入的，并不直接支持文件或文件夹的上传。然而，你可以通过一些间接的方式来实现文件夹的上传以及获取其中的图片及其路径。由于浏览器安全限制，直接通过前端读取用户本地文件系统的文件夹路径是不被允许的。但你可以让用户选择文件夹中的文件，然后上传这些文件。

下面是一种可能的解决方案，它使用 HTML5 的 <input type="file"> 控件来允许用户选择文件夹（通过特定的属性），然后处理这些文件，上传它们，并尝试获取它们的一些信息（但注意，你不会直接获取到本地文件系统的绝对路径）。

步骤 1: 允许用户选择文件夹

HTML5 允许你通过 <input type="file"> 的 webkitdirectory 和 directory 属性来让用户选择整个文件夹（但请注意，这些属性在某些浏览器上可能不被支持，尤其是非 Chrome 浏览器）。

<template>
  <div>
    <el-button type="primary" @click="selectFolder">选择文件夹</el-button>
    <input type="file" @change="handleFiles" webkitdirectory directory multiple style="display: none;" ref="fileInput">
  </div>
</template>

<script>
export default {
  methods: {
    selectFolder() {
      this.$refs.fileInput.click();
    },
    handleFiles(event) {
      const files = event.target.files;
      this.processFiles(files);
    },
    processFiles(files) {
      Array.from(files).forEach(file => {
        if (file.type.startsWith('image/')) {
          // 这里你可以上传图片或进行其他处理
          console.log(file.name); // 图片名称
          // 注意：你不会得到文件的本地路径

          // 如果需要上传，可以使用 FormData 和 Axios 等库
          // let formData = new FormData();
          // formData.append('file', file);
          // axios.post('/upload', formData, {
          //   headers: {
          //     'Content-Type': 'multipart/form-data'
          //   }
          // })
          // .then(response => {
          //   console.log('Success:', response);
          // })
          // .catch(error => {
          //   console.error('Error:', error);
          // });
        }
      });
    }
  }
}
</script>

注意事项

1. 安全性：由于浏览器安全限制，你无法直接访问用户文件系统的绝对路径。
2. 兼容性：webkitdirectory 和 directory 属性在 Firefox 和其他非 Chrome 浏览器上可能不被支持。
3. 性能：如果文件夹中包含大量文件，一次性处理可能会导致性能问题。你可能需要实现某种形式的分页或分批处理。
4. 上传：示例中注释了上传文件的代码部分，你可以根据需要启用和配置它。

通过上述方法，你可以让用户选择文件夹，并处理其中的图片文件，但无法直接获取它们的本地路径。