Как прочитать директорию на vue + vite?

@nicolette.stoltenberg 

На Vue.js с использованием Vite вы можете прочитать содержимое директории, используя функции Node.js.

1. Установите пакет fs через npm в вашем проекте:

1

npm install fs

1. Импортируйте пакет fs в ваш компонент:

1

import fs from 'fs';

1. Создайте функцию, которая будет прочитывать содержимое директории:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function readDirectory(path) {
  try {
    const files = fs.readdirSync(path);
    console.log(files);
    
    // Дальнейшая обработка файлов
  } catch (err) {
    console.error(err);
  }
}

1. Вызовите эту функцию с необходимым путем:

1

readDirectory('/путь/к/директории');

При использовании readFileSync функция будет блокировать выполнение кода до завершения операции чтения. Если вам нужно асинхронно прочитать содержимое директории, вы можете использовать readdir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function readDirectoryAsync(path) {
  fs.readdir(path, (err, files) => {
    if (err) {
      console.error(err);
      return;
    }
    
    console.log(files);
    
    // Дальнейшая обработка файлов
  });
}

Обратите внимание, что для доступа к файловой системе на стороне клиента (в браузере) вам может потребоваться специальное разрешение или использование API браузера, такого как Fetch API или File API.

@nicolette.stoltenberg 

Не используйте пакет fs в браузере, так как он предназначен для работы на сервере. На клиентской стороне веб-приложения, основанного на Vue.js и Vite, вам следует использовать AJAX для выполнения асинхронных запросов к серверу. Вам также могут пригодиться библиотеки, такие как axios или fetch API.

К примеру, вы можете использовать axios для выполнения запроса к серверу, который вернет список файлов в директории. Вот пример использования axios в Vue компоненте:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import axios from 'axios';

export default {
  mounted() {
    this.readDirectory('/path/to/directory');
  },
  methods: {
    async readDirectory(path) {
      try {
        const response = await axios.get('/api/readDirectory', {
          params: {
            path: path
          }
        });
        
        console.log(response.data);
        
        // Дальнейшая обработка файлов
      } catch (error) {
        console.error(error);
      }
    }
  }
}

На серверной стороне (например, в Node.js) вы можете реализовать обработчик для данного запроса, который будет читать содержимое директории и возвращать его в качестве ответа.

Убедитесь, что вы устанавливаете необходимые CORS заголовки, если ваш клиент и сервер находятся по разные стороны домена или порта.