वेबऐप विकसित करते समय, आपको फ़ाइल-संबंधित संचालन का सामना करना पड़ सकता है, जैसे सर्वर पर फ़ाइलें अपलोड करना, फ़ाइलों को स्थानीय में डाउनलोड करना, फ़ाइलों को कैश करना आदि। निम्नलिखित कई अलग-अलग तरीकों का परिचय देगा फ़ाइलों को संसाधित करने के लिए.

टैग-आधारित अपलोड और डाउनलोड

फ़ाइलें अपलोड करने का सबसे आम तरीका इनपुट टैग का उपयोग करना है। इनपुट टैग का प्रकार = "फ़ाइल" सेट करके, आप उपयोगकर्ताओं को अपलोड के लिए स्थानीय रूप से फ़ाइलों का चयन करने की अनुमति दे सकते हैं।

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

फ़ाइल एक्सेस एपीआई

फाइल सिस्टम एक्सेस एपीआई (फाइल सिस्टम एक्सेस एपीआई) फाइल सिस्टम एपीआई का हिस्सा है एपीआई का उपयोग करके उपयोगकर्ता के ऑपरेशन के तहत फाइलों को पढ़ा और लिखा जा सकता है।

फ़ाइल संचालन के लिए इस एपीआई का उपयोग करते समय निम्नलिखित इंटरफ़ेस का उपयोग किया जाएगा

• showOpenFilePicker: फ़ाइल पिकर प्रदर्शित करने के लिए उपयोग किया जाता है और उपयोगकर्ता को एक या अधिक फ़ाइलों का चयन करने की अनुमति देता है, और फिर इन फ़ाइलों पर हैंडल लौटाता है;

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: फ़ाइल पिकर प्रदर्शित करने और उपयोगकर्ता को फ़ाइल सहेजने (ओवरराइट करने या नई फ़ाइल बनाने) की अनुमति देने के लिए उपयोग किया जाता है;

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: एक निर्देशिका चयनकर्ता को प्रदर्शित करने और उपयोगकर्ता को एक निर्देशिका का चयन करने की अनुमति देने के लिए उपयोग किया जाता है;

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
}

स्रोत निजी फ़ाइल सिस्टम

स्रोत निजी फ़ाइल सिस्टम उपरोक्त फ़ाइल एक्सेस सिस्टम के समान है और फ़ाइल सिस्टम एपीआई का हिस्सा है, हालांकि, उनके बीच सबसे सीधा अंतर यह है कि यह उपयोगकर्ता को दिखाई देता है या नहीं। शोएक्सएक्सएक्स इंटरफेस को सभी को फ़ाइल (निर्देशिका) चयनकर्ता को खोलने की आवश्यकता है, और उपयोगकर्ता को सक्रिय रूप से फ़ाइल (निर्देशिका) का चयन करने की आवश्यकता है। सहेजी गई फ़ाइल को भी उपयोगकर्ता द्वारा निर्दिष्ट पथ पर सहेजने की आवश्यकता है, लेकिन स्रोत की बातचीत निजी है फ़ाइल सिस्टम उपयोगकर्ता को दिखाई नहीं देगा, और सहेजी गई फ़ाइल फ़ाइलें संसाधित डेटा हैं और मूल डेटा उपयोगकर्ता द्वारा नहीं देखा जा सकता है।

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() उपयोगकर्ता के स्थानीय फ़ाइल सिस्टम की रूट निर्देशिका का प्रतिनिधित्व करने वाला एक फ़ाइल हैंडल लौटाता है, और फिर getFileHandle के माध्यम से निर्दिष्ट फ़ाइल का हैंडल प्राप्त करता है, जिसका अर्थ है कि यदि फ़ाइल नहीं है मौजूद है, यह एक बनाएगा, और फिर 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/capability/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/