在ReactJs中如何通过<input>标签从文件路径获取对应文件夹名称

实现逻辑 #

• 原生浏览器API即可实现需求，无需引入第三方模块
• 给文件上传input标签添加webkitdirectory属性，开启文件夹上传能力
• 选中文件夹后返回的File对象自带webkitRelativePath字段，存储格式为根文件夹名/子文件夹名/文件名的完整相对路径，拆分该字符串即可获取你需要的Soma07根文件夹名称

完整代码示例 #

import { useState } from 'react'

const UploadComponent = () => {
  const [fileName, setFileName] = useState("")
  const [folderName, setFolderName] = useState("")

  const upLoadImage = async (e) => {
    const file = e.target.files[0]
    // 拆分相对路径获取根文件夹名
    const pathSegments = file.webkitRelativePath.split('/')
    const rootFolderName = pathSegments[0]
    setFolderName(rootFolderName)

    const base64 = await convertBase64(file);
    console.log('base64内容：', base64);
    setFileName(file.name)
  }

  const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);

      fileReader.onload = () => {
        resolve(fileReader.result)
      }
      fileReader.onerror = (error) => {
        reject(error)
      }
    })
  }

  return (
    <div>
      {/* 注意添加webkitdirectory属性 */}
      <input type="file" webkitdirectory onChange={upLoadImage} />
      <p>根文件夹名：{folderName}</p>
      <p>文件名：{fileName}</p>
    </div>
  )
}

export default UploadComponent

补充说明 #

如果需要获取文件所在的子文件夹名称，取拆分后pathSegments数组的倒数第二个元素即可。该方案兼容所有主流现代浏览器。

内容的提问来源于stack exchange，提问作者soma iyappan