Lors du développement d'une WebApp, vous pouvez rencontrer des opérations liées aux fichiers, telles que le téléchargement de fichiers sur le serveur, le téléchargement de fichiers sur le serveur local, la mise en cache de fichiers, etc. Ce qui suit présente plusieurs manières différentes pour traiter les fichiers.

Chargement et téléchargement basés sur des balises

La manière la plus courante de télécharger des fichiers consiste à utiliser la balise input En définissant le type="file" de la balise input, vous pouvez permettre aux utilisateurs de sélectionner localement les fichiers à télécharger.

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 d'accès aux fichiers

API d'accès au système de fichiers (API d'accès au système de fichiers) fait partie de l'API du système de fichiers. Les fichiers peuvent être lus et écrits sous l'opération de l'utilisateur à l'aide de l'API.

L'interface suivante sera utilisée lors de l'utilisation de cette API pour les opérations sur les fichiers

• showOpenFilePicker : utilisé pour afficher un sélecteur de fichiers et permettre à l'utilisateur de sélectionner un ou plusieurs fichiers, puis de renvoyer les handles de ces fichiers ;

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 : utilisé pour afficher un sélecteur de fichiers et permettre à l'utilisateur de sauvegarder un fichier (écraser ou en créer un nouveau) ;

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 : utilisé pour afficher un sélecteur de répertoire et permettre à l'utilisateur de sélectionner un répertoire ;

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
}

Système de fichiers privés source

Le système de fichiers privé source est similaire au système d'accès aux fichiers ci-dessus et fait partie de l'API du système de fichiers. Cependant, la différence la plus directe entre eux est de savoir s'il est visible par l'utilisateur. Les interfaces showXXX doivent toutes ouvrir le sélecteur de fichier (répertoire), et l'utilisateur doit sélectionner activement le fichier (répertoire). Le fichier enregistré doit également être enregistré dans le chemin spécifié par l'utilisateur, mais l'interaction de la source est privée. le système de fichiers ne sera pas visible par l'utilisateur et le fichier enregistré. Les fichiers sont des données traitées et les données originales ne peuvent pas être vues par l'utilisateur.

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() renvoie un descripteur de fichier représentant le répertoire racine du système de fichiers local de l'utilisateur, puis obtient le descripteur du fichier spécifié via getFileHandle, create est vrai, ce qui signifie que si le fichier ne le fait pas. existe, il en créera un, puis utilisera createWritable Créer un flux inscriptible. Les développeurs peuvent écrire des données dans le fichier spécifié via ce flux inscriptible, et enfin fermer le flux inscriptible.

Choses à noter

? Le système d'accès aux fichiers est très similaire au système de fichiers source utilisé. L'accès à des fichiers ou répertoires spécifiques nécessite un descripteur de fichier (FileSystemFileHandle) ou un descripteur de dossier (FileSystemDirectoryHandle).

Le handle peut être compris comme un wrapper pour le fichier lui-même, et le fichier est lu (getFile) et écrit (createWritable) via l'interface du handle.

Voir

• https://web.dev/articles/origin-private-file-system?hl=zh-cn#specials_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/