在開發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）屬於檔案系統 API 的一部分，可以透過使用 API 在使用者的操作下完成檔案的讀寫。
使用此 API 進行檔案操作時會使用以下介面
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>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>
}
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）操作。
以上是在瀏覽器中進行文件操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
