ブラウザ上でファイル操作を行う

WebApp を開発するとき、サーバーへのファイルのアップロード、ローカルへのファイルのダウンロード、ファイルのキャッシュなど、ファイル関連の操作が発生することがあります。以下では、いくつかの異なる方法を紹介します。ファイルを処理するために。

タグベースのアップロードとダウンロード

ファイルをアップロードする最も一般的な方法は、input タグを使用することです。input タグの type="file" を設定すると、ユーザーがアップロードするファイルをローカルで選択できるようになります。

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

File System Access API (File System Access API) は、ファイル システム API の一部であり、API を使用することにより、ユーザーの操作でファイルの読み取りと書き込みを行うことができます。

この API をファイル操作に使用する場合、次のインターフェースが使用されます

• showOpenFilePicker: ファイル ピッカーを表示し、ユーザーが 1 つ以上のファイルを選択して、これらのファイルへのハンドルを返すことができるようにするために使用されます。

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: ファイル ピッカーを表示し、ユーザーがファイルを保存 (上書きまたは新規作成) できるようにするために使用されます。

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: ディレクトリ セレクターを表示し、ユーザーがディレクトリを選択できるようにするために使用されます。

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>

ソースプライベートファイルシステム

ソース プライベート ファイル システムは上記のファイル アクセス システムに似ており、どちらもファイル システム API の一部ですが、それらの最も直接的な違いは、それらがユーザーに表示されるかどうかです。 showXXX インターフェイスはすべてファイル (ディレクトリ) セレクターを開く必要があり、ユーザーはファイル (ディレクトリ) をアクティブに選択する必要がありますが、保存されたファイルはユーザーが指定したパスに保存する必要がありますが、ソースの対話はプライベートです。ファイル システムはユーザーには表示されず、保存されたファイルは処理されたデータであり、元のデータはユーザーには表示されません。

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() は、ユーザーのローカル ファイル システムのルート ディレクトリを表すファイル ハンドルを返し、getFileHandle を通じて指定されたファイルのハンドルを取得します。これは、ファイルが存在しない場合に、create が true であることを意味します。存在する場合は作成し、createWritable を使用して書き込み可能なストリームを作成します。開発者は、この書き込み可能なストリームを通じて指定されたファイルにデータを書き込み、最後に書き込み可能なストリームを閉じることができます。

注意事項

? ファイル アクセス システムは、使用中のソース ファイル システムと非常に似ています。特定のファイルまたはディレクトリにアクセスするには、ファイル ハンドル (FileSystemFileHandle) またはフォルダー ハンドル (FileSystemDirectoryHandle) が必要です。

ハンドルはファイル自体のパッケージ化として理解でき、ファイルはハンドルのインターフェイスを通じて読み取られ (getFile)、書き込まれます (createWritable)。

見る

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

以上がブラウザ上でファイル操作を行うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。