Führen Sie Dateivorgänge im Browser aus

Bei der Entwicklung von WebApps können dateibezogene Vorgänge auftreten, z. B. das Hochladen von Dateien auf den Server, das Herunterladen von Dateien auf den lokalen Server, das Zwischenspeichern von Dateien usw. Im Folgenden werden verschiedene Möglichkeiten vorgestellt Dateien verarbeiten.

Tag-basierter Upload und Download

Die gebräuchlichste Methode zum Hochladen von Dateien ist die Verwendung des Eingabe-Tags. Durch Festlegen des Typs „file“ des Eingabe-Tags können Sie Benutzern erlauben, Dateien lokal zum Hochladen auszuwählen.

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>

Dateizugriffs-API

Dateisystemzugriffs-API (Dateisystemzugriffs-API) ist Teil der Dateisystem-API. Mithilfe der API können Dateien im Rahmen des Benutzervorgangs gelesen und geschrieben werden.

Die folgenden Schnittstellen werden verwendet, wenn diese API für Dateioperationen verwendet wird

• showOpenFilePicker: Wird verwendet, um eine Dateiauswahl anzuzeigen und dem Benutzer die Auswahl einer oder mehrerer Dateien zu ermöglichen und dann Handles für diese Dateien zurückzugeben.

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: wird verwendet, um eine Dateiauswahl anzuzeigen und dem Benutzer das Speichern einer Datei zu ermöglichen (überschreiben oder eine neue erstellen);

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: wird verwendet, um eine Verzeichnisauswahl anzuzeigen und dem Benutzer die Auswahl eines Verzeichnisses zu ermöglichen;

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>

Privates Quelldateisystem

Das private Quelldateisystem ähnelt dem oben genannten Dateizugriffssystem. Beide sind Teil der Dateisystem-API. Der direkteste Unterschied zwischen ihnen besteht jedoch darin, ob sie für Benutzer sichtbar sind. Alle showXXX-Schnittstellen müssen den Datei-(Verzeichnis-)Selektor öffnen, und der Benutzer muss die Datei (das Verzeichnis) aktiv auswählen. Die gespeicherte Datei muss ebenfalls unter dem vom Benutzer angegebenen Pfad gespeichert werden, die Interaktion mit der Quelle ist jedoch privat Das Dateisystem ist für den Benutzer und die gespeicherte Datei nicht sichtbar. Bei den Dateien handelt es sich um verarbeitete Daten, und die Originaldaten sind für den Benutzer nicht sichtbar.

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() gibt ein Dateihandle zurück, das das Stammverzeichnis des lokalen Dateisystems des Benutzers darstellt, und ruft dann das Handle der angegebenen Datei über getFileHandle ab Wenn vorhanden, wird ein solcher erstellt und dann verwendet createWritable Erstellen Sie einen beschreibbaren Stream. Entwickler können über diesen beschreibbaren Stream Daten in die angegebene Datei schreiben und schließlich den beschreibbaren Stream schließen.

Dinge zu beachten

? Das Dateizugriffssystem ist dem verwendeten Quelldateisystem sehr ähnlich. Der Zugriff auf bestimmte Dateien oder Verzeichnisse erfordert ein Dateihandle (FileSystemFileHandle) oder ein Ordnerhandle (FileSystemDirectoryHandle).

Das Handle kann als Verpackung der Datei selbst verstanden werden, und die Datei wird über die Schnittstelle des Handles gelesen (getFile) und geschrieben (createWritable).

Sehen

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

Das obige ist der detaillierte Inhalt vonFühren Sie Dateivorgänge im Browser aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!