Effectuer des opérations sur les fichiers dans le navigateur

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 d'entrée En définissant le type="file" de la balise d'entrée, vous pouvez permettre aux utilisateurs de sélectionner des fichiers localement à télécharger.

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

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'action de l'utilisateur à l'aide de l'API.

Les interfaces suivantes seront utilisées 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<file null>(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return <button onclick="{handleChooseFile}">Click</button>
}
</file>

• 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 <button onclick="{handleChooseFile}">Click</button>
}

• 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<file null>(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 <button onclick="{handleDownloadFile}">Click</button>
}
</file>

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, les deux font partie de l'API du système de fichiers, mais la différence la plus directe entre eux est de savoir s'ils sont visibles par les utilisateurs. 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<htmlinputelement>) => {
    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 <inputfile onchange="{handleChooseFile}"></inputfile>;
}
</htmlinputelement>

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 des répertoires spécifiques nécessite un descripteur de fichier (FileSystemFileHandle) ou un descripteur de dossier (FileSystemDirectoryHandle).

Le handle peut être compris comme l'empaquetage du 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/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!