如何使用 chrome app filesystem api 执行文件保存？答案

【问题标题】：How to perform file save using chrome app filesystem api?如何使用 chrome app filesystem api 执行文件保存？
【发布时间】：2016-06-17 19:43:37
【问题描述】：

我正在浏览 Chrome 应用程序 tutorial，并试图使用文件系统 API 保存文件。

根据我理解的描述，我应该能够打开和读取一个文件，然后使用相同的 FileEntry 创建一个可写的 FileEntry 对象并替换文件内容。

我能够选择和读取文件内容，并且覆盖似乎几乎起作用。控制台输出让我相信文件已写入，但内容实际上并没有改变。这是我的代码和输出；

manifest.json;

{
  "manifest_version": 2,
  "name": "angular toots",
  "version": "1",
  "icons": { "128": "icon_128.png" },
  "app": { "background": { "scripts": ["background.js"] } },
  "permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}], 
  "minimum_chrome_version": "28"
}

index.html;

<body ng-app="myApp" ng-controller="appCtrl" >
    <div>
        <form name="fileForm">
            <button ng-click="onLoad()">Load</button>
            <button ng-click="onSave()">Save</button>
        </form>
    </div>
</body>

app.js;

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope) {

    $scope.chosenFileEntry = null;

    $scope.onLoad = function(e) {
        chrome.fileSystem.chooseEntry({type: 'openFile'}, function(fileEntry) {
            $scope.chosenFileEntry = fileEntry;
            console.log($scope.chosenFileEntry);
            fileEntry.file(function(file) {
                var reader = new FileReader();
                reader.onerror = function(e){console.log('error 1');};
                reader.onloadend = function(loadEvent) {
                    console.log(loadEvent.target.result);
                };
                reader.readAsText(file);
            }, function(e){console.log('error 2');});
        });
    };

    $scope.onSave = function(e){
        console.log('onSave');
        console.log($scope.chosenFileEntry);
        chrome.fileSystem.getWritableEntry($scope.chosenFileEntry, function(writableFileEntry) {
            writableFileEntry.createWriter(function(writer) {
                writer.onerror = function(e){console.log('error 1');};
                writer.onwriteend = function(e){console.log('written');};
                console.log('writing');
                $scope.chosenFileEntry.file(function(file) {
                    writer.write(file);
                });
            }, function(e){console.log('error 2');});
        });
    };
});

c:\Users\rooster\Desktop\foo.txt

Some Text

当我点击加载，然后点击保存时，我在控制台中得到了这个；

> FileEntry {isFile: true, isDirectory: false, name: "foo.txt", fullPath: "/foo.txt", filesystem: DOMFileSystem}
Some Text
onSave
> FileEntry {isFile: true, isDirectory: false, name: "foo.txt", fullPath: "/foo.txt", filesystem: DOMFileSystem}
writing
written

但是，目标文件的内容没有改变。

我确实注意到 FileEntry fullPath 属性实际上并不是文件的完整路径。尝试修改该属性似乎没有任何效果，即无法更改。

我错过了什么？

【问题讨论】：

标签： javascript google-chrome-app html5-filesystem

【解决方案1】：

您需要使用chrome.fileSystem API。您将需要至少询问用户一次将文件保存在哪里，然后您可以保留该条目以再次写入同一文件/文件夹。

使用chrome.fileSystem.chooseEntry({'type': "openDirectory"}) 提示用户选择一个目录，但我找不到保存到该目录的方法。

声明fileSystem API的权限：

"permissions": [
{"fileSystem": ["write", "retainEntries", "directory"]}
]

然后，通过HTML FileSystem API，可以在目录下创建文件：

dirEntry.getFile(
"test.txt",
{create: true}, // add "exclusive: true" to prevent overwrite
function(fileEntry) { /* write here */ },
function(e) { console.error(e) }
);

【讨论】：