Ao desenvolver WebApp, você pode encontrar operações relacionadas a arquivos, como upload de arquivos para o servidor, download de arquivos para o local, armazenamento em cache de arquivos, etc. para processar arquivos operar.

Upload e download baseados em tags

A maneira mais comum de fazer upload de arquivos é usar a tag de entrada. Ao definir o type="file" da tag de entrada, você pode permitir que os usuários selecionem arquivos localmente para upload.

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 de acesso a arquivos

API de acesso ao sistema de arquivos (API de acesso ao sistema de arquivos) faz parte da API do sistema de arquivos. Os arquivos podem ser lidos e gravados sob a operação do usuário usando a API.

A interface a seguir será usada ao usar esta API para operações de arquivo

• showOpenFilePicker: usado para exibir um seletor de arquivos e permitir que o usuário selecione um ou mais arquivos e, em seguida, retorne identificadores para esses arquivos;

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: usado para exibir um seletor de arquivos e permitir ao usuário salvar um arquivo (sobrescrever ou criar um novo);

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: usado para exibir um seletor de diretório e permitir que o usuário selecione um diretório;

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
}

Sistema de arquivos privados de origem

O sistema de arquivos privado de origem é semelhante ao sistema de acesso a arquivos acima e faz parte da API do sistema de arquivos. No entanto, a diferença mais direta entre eles é se ele é visível para o usuário. Todas as interfaces showXXX precisam abrir o seletor de arquivo (diretório), e o usuário precisa selecionar ativamente o arquivo (diretório). O arquivo salvo também precisa ser salvo no caminho especificado pelo usuário, mas a interação da fonte é privada. o sistema de arquivos não será visível para o usuário e o arquivo salvo Os arquivos são dados processados ​​e os dados originais não podem ser vistos pelo usuário.

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() retorna um identificador de arquivo que representa o diretório raiz do sistema de arquivos local do usuário e, em seguida, obtém o identificador do arquivo especificado por meio de getFileHandle, criar é verdadeiro, o que significa que se o arquivo não o fizer. existir, ele criará um e, em seguida, usará createWritable Criar um fluxo gravável. Os desenvolvedores podem gravar dados no arquivo especificado por meio desse fluxo gravável e, finalmente, fechar o fluxo gravável.

Coisas a serem observadas

? O sistema de acesso a arquivos é muito semelhante ao sistema de arquivos de origem em uso. O acesso a arquivos ou diretórios específicos requer um identificador de arquivo (FileSystemFileHandle) ou um identificador de pasta (FileSystemDirectoryHandle).

O identificador pode ser entendido como um wrapper para o próprio arquivo, e o arquivo é lido (getFile) e gravado (createWritable) por meio da interface do identificador.

Ver

• 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/