Question

我正在浏览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：\用户\公鸡\桌面\ 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 属性实际上不是文件的完整路径。试图修改该属性似乎没有任何影响，即它无法更改。

我错过了什么？

Answer 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) }
);

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

1 个答案: