Find N3入網：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經正式入網，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
周末逛github的時候，發現我們只需要在github域名上加上1s他就能夠打開一個vscode窗口來閱讀代碼，比起在github倉庫中查看更加方便
圖片
然后我就想網頁端vscode能不能打開我本地的項目呢，帶著這個疑惑我打開了網頁版vscode，它居然真的可以打開我本地的項目代碼!
圖片
難道又出了新的API讓前端的能力更進一步了？打開MDN查了一下相關文檔，發現了幾個新的API
用來選擇文件
圖片
showOpenFilePicker()multiple：布爾值，默認為false。為true表示允許用戶選擇多個文件
excludeAcceptAllOption：布爾值，默認為false。默認情況下，文件選擇器帶有一個允許用戶選擇所有類型文件的過濾選項（展開于文件類型選項中）。設置此選項為 true 以使該過濾選項不可用。
types：表示允許選擇的文件類型的數組
返回一個promise對象，會兌現一個包含 FileSystemFileHandle 對象的 Array 數組。
<template> <div class="open_file" @click="openFile">打開文件</div></template><script setup lang="ts">const openFile = async () => { const res = await window.showOpenFilePicker(); console.log(res);};</script>默認只能打開一個文件，可以傳入multiple:true打開多個文件
圖片
用來選擇目錄
圖片
屬于瀏覽器全局方法，直接調用即可
showDirectoryPicker()multiple：布爾值，默認為false。為true表示允許用戶選擇多個文件
excludeAcceptAllOption：布爾值，默認為false。默認情況下，文件選擇器帶有一個允許用戶選擇所有類型文件的過濾選項（展開于文件類型選項中）。設置此選項為 true 以使該過濾選項不可用。
types：表示允許選擇的文件類型的數組
返回一個promise對象，會兌現一個包含 FileSystemFileHandle 對象的 Array 數組。
<template> <div class="open_file" @click="openFile">打開文件</div> <div class="open_file" @click="openDir">打開文件夾</div></template><script setup lang="ts">const openFile = async () => { const res = await window.showOpenFilePicker({ // multiple: true, }); console.log(res.length);};const openDir = async () => { const res = await window.showDirectoryPicker(); console.log(res);};</script>
圖片
FileSystemFileHandle提供了一些方法可以用來獲取和操作文件
FileSystemDirectoryHandle對象是一個代表文件系統中的目錄的對象，它同樣提供了方法來獲取和操作目錄
entries、keys、values這三個方法都是用來獲取目錄中的所有文件和目錄的，它們返回的都是一個AsyncIterable對象，我們可以通過for await...of語法來遍歷它。
了解完這些知識點，我們就可以來開發一個簡陋網頁版編輯器了，初期只包含打開文件、打開文件夾、查看文件、切換文件
編輯器大概長這樣：
圖片
const openDir = async () => { const res = await window.showDirectoryPicker({}); const detalAction = async (obj: any) => { if (obj.entries) { const dirs = obj.entries(); for await (const entry of dirs) { if (entry[1].entries) { // 文件夾，遞歸處理 detalAction(entry[1]); } else { // 文件 fileList.value.push({ name: entry[0], path: obj.name, fileHandle: entry[1], }); } } } }; await detalAction(res); showCode(fileList.value[0], 0); console.log("--fileList--", fileList);};這里主要是遞歸處理文件夾，返回一個文件列表
const showCode = async (item: any, index: number) => { const file = await item.fileHandle.getFile(); const text = await file.text(); codeText.value = text; currentIndex.value = index;};使用highlight.js來高亮展示代碼
<div class="show_code"> <pre v-highlight> <code class="lang-dart"> {{ codeText }} </code> </pre></div>最終效果如下：
圖片
想不到吧，這種功能現在純前端就能夠實現了，當然還可以做的更復雜一點，包括修改保存等功能，保存可以使用showSaveFilePickerAPI，它可以寫入文件，同樣是返回一個promise。感興趣的可以試著完善編輯器的功能。
本文鏈接：http://www.tebozhan.com/showinfo-26-15231-0.html純前端也可以訪問文件系統！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號