vue 获取一文件夹里的图片个数

你可以使用 Vue.js 中的 axios 库和 Node.js 中的 fs 模块来实现获取一个文件夹里的图片个数。

以下是一个简单的实现方式：

1. 在 Vue.js 的组件中，使用 axios 发送一个 GET 请求到后端，请求获取某个文件夹的图片列表。

2. 在后端，使用 Node.js 的 fs 模块读取该文件夹下的所有文件，筛选出图片类型的文件（例如 .jpg、.png 等），并返回图片列表给前端。

3. 在前端，通过获取到的图片列表，统计图片数量即可。

以下是一个简单的示例代码：

// 前端代码
<template>
  <div>
    <p>图片个数：{{ imageCount }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageCount: 0,
    };
  },
  mounted() {
    axios.get('/api/getImageList')
      .then(response => {
        // 统计图片个数
        this.imageCount = response.data.filter(file => /\.(jpg|png|jpeg)$/.test(file)).length;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

// 后端代码
const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

// 获取指定文件夹下的所有文件
function getAllFiles(dirPath, arrayOfFiles) {
  const files = fs.readdirSync(dirPath);

  arrayOfFiles = arrayOfFiles || [];

  files.forEach(file => {
    if (fs.statSync(dirPath + "/" + file).isDirectory()) {
      arrayOfFiles = getAllFiles(dirPath + "/" + file, arrayOfFiles);
    } else {
      arrayOfFiles.push(path.join(dirPath, "/", file));
    }
  });

  return arrayOfFiles;
}

app.get('/api/getImageList', (req, res) => {
  const dirPath = '/path/to/image/folder'; // 修改为你需要获取的文件夹路径
  const files = getAllFiles(dirPath);

  res.send(files);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

请注意，上述代码仅供参考，实际应用中可能需要根据具体情况进行修改和完善。