عند تطوير WebApp، قد تواجه عمليات متعلقة بالملفات، مثل تحميل الملفات إلى الخادم، وتنزيل الملفات على الموقع المحلي، وتخزين الملفات مؤقتًا، وما إلى ذلك. وسيقدم ما يلي عدة طرق مختلفة لمعالجة الملفات.

التحميل والتنزيل على أساس العلامات

الطريقة الأكثر شيوعًا لتحميل الملفات هي استخدام علامة الإدخال، ومن خلال تعيين النوع = "ملف" لعلامة الإدخال، يمكنك السماح للمستخدمين بتحديد الملفات محليًا للتحميل.

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
}

مصدر نظام الملفات الخاصة

يشبه نظام الملفات الخاص المصدر نظام الوصول إلى الملفات أعلاه وهو جزء من واجهة برمجة تطبيقات نظام الملفات، ومع ذلك، فإن الاختلاف الأكثر مباشرة بينهما هو ما إذا كان مرئيًا للمستخدم. تحتاج جميع واجهات showXXX إلى فتح محدد الملف (الدليل)، ويحتاج المستخدم إلى تحديد الملف (الدليل) بشكل نشط، ويجب أيضًا حفظ الملف المحفوظ في المسار المحدد من قبل المستخدم، ولكن تفاعل المصدر خاص لن يكون نظام الملفات مرئيًا للمستخدم، والملف المحفوظ عبارة عن بيانات معالجة ولا يمكن للمستخدم رؤية البيانات الأصلية.

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#specs_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/