vue3里怎么遍历videoList的本地文件夹

在Vue3中，你可以使用JavaScript中的File API来获取本地文件夹中的视频文件列表，然后使用v-for指令将其遍历。以下是示例代码：

<template>
  <div>
    <h1>Video List</h1>
    <ul>
      <li v-for="(video, index) in videoList" :key="index">
        {{ video.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoList: []
    }
  },
  mounted() {
    this.getVideoList()
  },
  methods: {
    getVideoList() {
      const videoFolder = '/path/to/video/folder'
      const fileInput = document.createElement('input')
      fileInput.type = 'file'
      fileInput.webkitdirectory = true
      fileInput.addEventListener('change', () => {
        const files = fileInput.files
        for (let i = 0; i < files.length; i++) {
          if (files[i].type.includes('video')) {
            this.videoList.push(files[i])
          }
        }
      })
      fileInput.click()
    }
  }
}
</script>

在上面的代码中，我们先创建一个空数组来存储本地视频文件列表。然后，我们在组件挂载时调用`getVideoList()`方法来获取视频列表。在`getVideoList()`方法中，我们首先定义了一个`videoFolder`变量来存储本地视频文件夹的路径。然后，我们创建了一个`input`元素，并将其类型设置为`file`，并将其`webkitdirectory`属性设置为`true`，这样用户就可以选择一个文件夹而不是单个文件。接下来，我们添加了一个`change`事件监听器，并在其中循环遍历用户选择的所有文件，将视频文件添加到`videoList`数组中。最后，我们调用了`click()`方法来触发文件选择对话框。最终，我们使用v-for指令将`videoList`数组中的视频文件遍历并渲染到页面上。