How to restore the folder hierarchy from the files list of file uploads?

When doing file upload, select the folder and get the files list. But there is no directory hierarchy of folders.The following array can be obtained from the list of files. How can you restore the folder structure by traversing the file’s webkitRelativePath? Thanks very much!
The following array is:

const files = [
  {
    file: {
      webkitRelativePath: ''
    },
    name: '测试文件.text'
  },
  {
    file: {
      webkitRelativePath: 'test/前端文件.PDF'
    },
    name: '前端文件.PDF'
  },
  {
    file: {
      webkitRelativePath: 'test/x/第一次上传.mp4'
    },
    name: '第一次上传.mp4'
  },
  {
    file: {
      webkitRelativePath: 'test/x/第二次上传.mp4'
    },
    name: '第二次上传.mp4'
  }
]

Through a function to be

const directory = [
  {
    file: {
      webkitRelativePath: ''
    },
    Type: 'FILE',
    name: '测试文件.text'
  },
  {
    Type: 'DIR',
    name: 'test',
    subdirectory: [
      {
        file: {
          webkitRelativePath: 'test/前端文件.PDF'
        },
        Type: 'FILE',
        name: '前端文件.PDF'
      },
      {
        Type: 'DIR',
        name: 'x',
        subdirectory: [
          {
            file: {
              webkitRelativePath: 'test/x/第一次上传.mp4'
            },
            Type: 'FILE',
            name: '第一次上传.mp4'
          },
          {
            file: {
              webkitRelativePath: 'test/x/第二次上传.mp4'
            },
            Type: 'FILE',
            name: '第二次上传.mp4'
          }
        ]
      }
    ]
  },
]