عند تطوير 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 }
واجهة برمجة تطبيقات الوصول إلى نظام الملفات (واجهة برمجة تطبيقات الوصول إلى نظام الملفات) هي جزء من واجهة برمجة تطبيقات نظام الملفات. يمكن قراءة الملفات وكتابتها ضمن عملية المستخدم باستخدام واجهة برمجة التطبيقات.
سيتم استخدام الواجهة التالية عند استخدام واجهة برمجة التطبيقات هذه لعمليات الملفات
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 }
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 }
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 }
يشبه نظام الملفات الخاص المصدر نظام الوصول إلى الملفات أعلاه وهو جزء من واجهة برمجة تطبيقات نظام الملفات، ومع ذلك، فإن الاختلاف الأكثر مباشرة بينهما هو ما إذا كان مرئيًا للمستخدم. تحتاج جميع واجهات 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) من خلال واجهة المقبض.
تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.
Copyright© 2022 湘ICP备2022001581号-3