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

Пользователь

от nicolette.stoltenberg , в категории: JavaScript , 10 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nicola , 10 месяцев назад

@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.

Пользователь

от amaya_bahringer , 11 дней назад

@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 заголовки, если ваш клиент и сервер находятся по разные стороны домена или порта.