FileSystemApi и WritableStream

Question

Я пытаюсь использовать FileSystem API для записи загруженного файла на SPA в локальную изолированную файловую систему с помощью FileSystem API.

Файл загружен с помощью drop acion, и я могу получить Fileмассив объектов в обратном вызове. Из File Я могу получить ReadableStream вызов stream метод (да, он возвращает только читаемый поток).

Учитывая, что загруженный файл может быть достаточно большим, я бы предпочел потоковую передачу, а не полную загрузку в blob, а затем запись в API FileSystem.

Итак, следуя документации, шаги следующие:

1. получить FileSystem (DOMFileSystem) через асинхронный webkitRequestFileSystem вызов.
2. получить опору root это FileSystemDirectoryEntry
3. создать файл через getFile (с флагом create:true), который возвращает (async) a FileSystemFileEntry

Теперь из FileEntry я могу получить FileWriter, используя createWriter но он устарел (в MDN), и в любом случае это FileWriter, а я бы хотел получить WritableStream вместо этого, чтобы использовать pipeTo из загруженного файла Handler->ReadableStream.

Итак, я вижу, что в консоли класс (интерфейс) FileSystemFileHandler определено, но я не могу понять, как получить экземпляр из FileSystemFileEntry. Если я смогу получить FileSystemFileHandler Я могу позвонить createWritable получить FileSystemWritableFileStream что я могу "передать" с помощью ReadStream.

Кто-нибудь может прояснить этот беспорядок?

ссылки:https://web.dev/file-system-access/https://wicg.github.io/file-system-access/#filesystemhandlehttps://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry

Answer 1

У вас есть решение в ваших ссылках «ссылки» внизу. В частности, это раздел для чтения. Вы можете создавать файлы или каталоги следующим образом:

      // In an existing directory, create a new directory named "My Documents".
const newDirectoryHandle = await existingDirectoryHandle.getDirectoryHandle('My Documents', {
  create: true,
});
// In this new directory, create a file named "My Notes.txt".
const newFileHandle = await newDirectoryHandle.getFileHandle('My Notes.txt', { create: true });

Когда у вас есть дескриптор файла, вы можете подключиться к нему или записать в него:

      async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

…или же…

      async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}