uniapp vue2项目 获取static文件下的所有视频文件,并便利到页面上

在uniapp Vue2项目中，获取`static`文件夹下的所有视频文件并显示到页面上，可以按照以下步骤操作：

1. **路径定位**：
首先，你需要确保视频文件存储在`static`目录下，并且它们有明确的文件名或者某种结构便于遍历。你可以通过`uni.getStorageSync`或`axios`等工具从服务器获取静态资源，因为uniapp限制了直接读取本地文件系统。

const baseUrl = 'static/video'; // 假设你的视频文件位于static/video目录下

2. **获取文件列表**：
使用`uni.readdirAsync`异步读取目录内容，这个API用于读取指定目录下的文件信息。如果需要获取视频文件，可以在回调函数中检查每个返回的文件是否为视频文件。

uni.readdirAsync(baseUrl)
.then((res) => {
  const videoFiles = res.filter(file => /\.mp4|\.avi|\.mov$/i.test(file)); // 正则表达式匹配常见的视频文件格式
  // 然后处理videoFiles数组，例如渲染到页面
})
.catch((err) => {
  console.error('读取文件失败', err);
});

3. **动态加载到页面**：
将视频文件的信息（如文件名、URL等）传递给组件，然后在模板中使用`v-for`循环展示。如果是Vue单文件组件，可以这样做：

<template>
  <div v-for="(file, index) in videoFiles" :key="index">
    <video :src="baseUrl + '/' + file" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoFiles: [],
    };
  },
  async created() {
    this.videoFiles = await getVideoFiles();
  },
  methods: {
    async getVideoFiles() {
      // ... 上述代码
    },
  },
};
</script>

4. **注意事项**：
- 如果视频文件很大，考虑预加载策略以优化用户体验。
- 检查权限，确保应用程序有足够的权限访问`static`文件夹。