При разработке WebApp вы можете столкнуться с операциями, связанными с файлами, такими как загрузка файлов на сервер, загрузка файлов на локальный компьютер, кэширование файлов и т. д. Ниже будут представлены несколько различных способов. для обработки файлов.

Загрузка и загрузка на основе тегов

Самый распространенный способ загрузки файлов — использование тега ввода. Установив type="file" тега ввода, вы можете разрешить пользователям выбирать файлы для загрузки локально.

function InputFile() {
    const [file, setFile] = useState(null);
    const handleChange = (e: React.ChangeEvent) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setFile(file);
  };
    return 
}

API доступа к файлам

API доступа к файловой системе (API доступа к файловой системе) является частью API файловой системы. Файлы можно читать и записывать под управлением пользователя с помощью API.

Следующий интерфейс будет использоваться при использовании этого API для операций с файлами

• showOpenFilePicker: используется для отображения средства выбора файлов и позволяет пользователю выбрать один или несколько файлов, а затем вернуть дескрипторы этих файлов;

export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return Click
}

• showSaveFilePicker: используется для отображения средства выбора файла и позволяет пользователю сохранить файл (перезаписать или создать новый);

export function PickerFS() {
    const handleChooseFile = async () => {
    const directoryHandle = await window.showDirectoryPicker();
    const keys = directoryHandle.keys();
    // 打印该目录下所有文件的名字
    for await (const key of keys) {
      console.log(key);
    }
  };
  return Click
}

• showDirectoryPicker: используется для отображения селектора каталогов и позволяет пользователю выбирать каталог;

export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleDownloadFile= async () => {
    const opts = {
      suggestedName: "test.txt",
      types: [
        {
          description: "Text file",
          accept: { "text/plain": [".txt"] },
        },
      ],
    };

    const fileHandle = await window.showSaveFilePicker(opts);
    const writable = await fileHandle.createWritable();
    await writable.write("Hello, world!");
    await writable.close();
  };
  return Click
}

Исходная частная файловая система

Исходная частная файловая система аналогична описанной выше системе доступа к файлам и является частью API файловой системы. Однако самое прямое различие между ними заключается в том, видна ли она пользователю. Все интерфейсы showXXX должны открывать селектор файла (каталога), и пользователю необходимо активно выбирать файл (каталог). Сохраненный файл также необходимо сохранить по пути, указанному пользователем, но взаимодействие с источником является частным. файловая система не будет видна пользователю, а сохраненный файл. Файлы представляют собой обработанные данные, и исходные данные не могут быть просмотрены пользователем.

export function OpFs() {
  const handleChooseFile = async (event: React.ChangeEvent) => {
    const fileList = event.target.files;
    const file = fileList && fileList[0];
    if (!file) return;

    const opfsRoot = await navigator.storage.getDi rectory();
    const fileHandle = await opfsRoot.getFileHandle(file.name, { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write(file);
    await writable.close();
  };

  return ;
}

await navigator.storage.getDirectory() возвращает дескриптор файла, представляющий корневой каталог локальной файловой системы пользователя, а затем получает дескриптор указанного файла с помощью getFileHandle. Create имеет значение true, что означает, что если файл не существует. существует, он создаст его, а затем использует createWritable. Создайте записываемый поток. Разработчики могут записывать данные в указанный файл через этот записываемый поток и, наконец, закрывать записываемый поток.

На что следует обратить внимание

? Система доступа к файлам очень похожа на используемую исходную файловую систему. Для доступа к определенным файлам или каталогам требуется дескриптор файла (FileSystemFileHandle) или дескриптор папки (FileSystemDirectoryHandle).

Дескриптор можно понимать как обертку самого файла, а чтение файла (getFile) и запись (createWritable) происходит через интерфейс дескриптора.

Видеть

• https://web.dev/articles/origin-private-file-system?hl=zh-cn#specifics_of_the_origin_private_file_system
• https://developer.chrome.com/docs/capabilities/web-apis/file-system-access?hl=zh-cn
• https://gine.me/posts/70f8e931bc17426fb54127948bcf4a0e
• https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/