现代浏览器不支持直接通过 `navigator.permissions.query({ name: 'file-system' })` 获取“文件编辑”权限，该权限并不存在于当前标准中；实际应使用 file api 读取用户主动选择的文件，结合 `showsavefilepicker` 等 web apis 实现受控的读写操作。
在 Web 开发中，浏览器从未提供过名为 "file-system" 或 "file-editing" 的标准权限。你无法像请求地理位置或通知权限那样，通过 navigator.permissions.query({ name: 'file-system' }) 预先申请“编辑任意文件”的能力——这出于严格的安全沙箱原则：网页不能未经用户明确、逐次交互就访问本地文件系统。
✅ 正确做法是遵循 “用户手势驱动 + 显式选择” 模式：
- 读取文件：使用 <input type="file"> 让用户手动选择文件（触发 change 事件），再通过 FileReader 或 Blob.text()/arrayBuffer() 安全读取内容；
- 写入/保存文件：使用 Web File System Access API（Chrome 86+、Edge 86+、Firefox 125+ 支持）调用 showOpenFilePicker()（读）或 showSaveFilePicker()（写），每次操作均需用户点击确认。
以下是完整、可运行的示例代码（兼容现代浏览器）：
<!DOCTYPE html>
<html>
<head><title>安全文件处理示例</title></head>
<body>
<h2>请选择一个文本文件进行处理</h2>
<input type="file" id="fileInput" accept=".txt">
<button onclick="processFile()">处理文件</button>
<button onclick="saveProcessedContent()">保存结果</button>
<pre id="output" style="background:#f5f5f5; padding:1em; max-height:200px; overflow:auto;"></pre>
<script>
let currentFileHandle = null;
let processedContent = "";
async function processFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
alert("请先选择一个文件");
return;
}
try {
// ✅ 安全读取：仅处理用户选中的文件
const text = await file.text();
processedContent = `[处理时间: ${new Date().toLocaleTimeString()}]\n${text.toUpperCase()}`;
document.getElementById('output').textContent = processedContent;
console.log("文件已读取并处理完成");
} catch (err) {
console.error("读取失败:", err);
alert("文件读取失败：" + err.message);
}
}
// ✅ 写入文件：需用户主动触发保存对话框
async function saveProcessedContent() {
if (!processedContent) return;
try {
// 调用保存文件选择器（用户必须点击确认）
const handle = await window.showSaveFilePicker({
suggestedName: "processed-output.txt",
types: [{
description: "Text Files",
accept: { "text/plain": [".txt"] }
}]
});
const writable = await handle.createWritable();
await writable.write(processedContent);
await writable.close();
alert("文件已成功保存！");
} catch (err) {
// 用户取消保存或拒绝权限时捕获 DOMException
if (err.name !== "AbortError") {
console.error("保存失败:", err);
alert("保存失败：" + err.message);
}
}
}
</script>
</body>
</html>⚠️ 重要注意事项：
- 无静默权限：navigator.permissions.query({ name: 'xxx' }) 对文件系统不适用；'file-system' 不是标准权限名（MDN 权限列表 中无此项）；
- 仅支持 HTTPS：File System Access API 必须在安全上下文（HTTPS 或 localhost）中运行；
- 用户交互必需：showOpenFilePicker/showSaveFilePicker 只能在用户手势（如 click、keydown）后立即调用，否则抛出 DOMException；
- 降级方案：对于不支持 File System Access API 的浏览器（如 Safari），可改用 a[download] 触发下载（仅适用于生成内容，不可写入任意路径）。
总结：Web 应用的文件操作本质是以用户为中心的协作流程——不是“申请权限”，而是“发起请求 + 尊重用户每一次确认”。掌握 File API 和 File System Access API 的正确组合，即可构建既强大又符合安全规范的文件处理功能。
