Lakukan operasi fail dalam penyemak imbas

Apabila membangunkan WebApp, anda mungkin menghadapi operasi berkaitan fail, seperti memuat naik fail ke pelayan, memuat turun fail ke setempat, menyimpan fail cache, dll. Berikut akan memperkenalkan beberapa cara berbeza untuk memproses fail beroperasi.

Muat naik dan muat turun berasaskan teg

Cara paling biasa untuk memuat naik fail ialah menggunakan teg input Dengan menetapkan jenis teg input = "fail", anda boleh membenarkan pengguna memilih fail secara setempat untuk dimuat naik.

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 akses fail

API Akses Sistem Fail (API Akses Sistem Fail) ialah sebahagian daripada API sistem fail Fail boleh dibaca dan ditulis di bawah operasi pengguna dengan menggunakan API.

Antara muka berikut akan digunakan apabila menggunakan API ini untuk operasi fail

• showOpenFilePicker: digunakan untuk memaparkan pemilih fail dan membenarkan pengguna memilih satu atau lebih fail, dan kemudian mengembalikan pemegang kepada fail ini;

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: digunakan untuk memaparkan pemilih fail dan membenarkan pengguna menyimpan fail (tulis ganti atau buat yang baharu);

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: digunakan untuk memaparkan pemilih direktori dan membenarkan pengguna memilih direktori;

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>

Sistem Fail Peribadi Sumber

Sistem fail persendirian sumber adalah serupa dengan sistem capaian fail di atas, kedua-duanya adalah sebahagian daripada API sistem fail, tetapi perbezaan paling langsung antara mereka ialah sama ada ia boleh dilihat oleh pengguna. Antara muka showXXX semuanya perlu membuka pemilih (direktori) fail, dan pengguna perlu memilih fail (direktori) secara aktif Fail yang disimpan juga perlu disimpan ke laluan yang ditentukan oleh pengguna, tetapi interaksi sumber peribadi sistem fail tidak akan kelihatan kepada pengguna, dan fail yang disimpan Fail adalah data yang diproses dan data asal tidak dapat dilihat oleh pengguna.

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() mengembalikan pemegang fail yang mewakili direktori akar sistem fail setempat pengguna, dan kemudian mendapatkan pemegang fail yang ditentukan melalui getFileHandle create adalah benar, yang bermaksud jika fail itu tidak wujud, ia akan mencipta satu, dan kemudian menggunakan createWritable Buat strim boleh tulis Pembangun boleh menulis data ke fail yang ditentukan melalui strim boleh tulis ini, dan akhirnya menutup strim boleh tulis.

Perkara yang perlu diperhatikan

? Sistem akses fail sangat serupa dengan sistem fail sumber yang digunakan Akses kepada fail atau direktori tertentu memerlukan pemegang fail (FileSystemFileHandle) atau pemegang folder (FileSystemDirectoryHandle).

Hendal boleh difahami sebagai pembungkusan fail itu sendiri, dan fail dibaca (getFile) dan ditulis (createWritable) melalui antara muka pemegang.

Lihat

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

Atas ialah kandungan terperinci Lakukan operasi fail dalam penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!