浏览器直接操作本地文件

一般浏览器出于安全性考虑，对本地文件的操作权限（读取、编辑、保存）是非常有限的。所以一般处理文件都是通过先上传再操作的方式，也就是先将文件上传到服务器，再由服务器进行操作，然后再进行保存。
有没有不通过服务器直接操作本地文件呢？当然可以，通过 File System Access API 方式，它是浏览器原生的API。在新版本的Chrome和Edge都是支持的，可以在这里查看浏览器支持情况：Can I Use - File System Access API。

场景：有一个本地文件(.xls/.psd)，在浏览器用服务打开操作并保存，仍保存到这个本地文件中。

使用方式

• 用户手动选择文件，这一步最主要的是让用户授权。
• 支持文件的直接修改，无需上传到服务器。

代码示例

async function openAndEditFile() {
    try {
        // 用户选择文件
        const [fileHandle] = await window.showOpenFilePicker();
        const file = await fileHandle.getFile();
        console.log('Original Content:', await file.text());

        // 编辑内容
        const writable = await fileHandle.createWritable();
        await writable.write('Updated Content!');
        await writable.close();

        console.log('File updated successfully.');
    } catch (error) {
        console.error('Error accessing file:', error);
    }
}