Javascript 如何使用chrome应用程序文件系统api执行文件保存？_Javascript_Google Chrome App_Html5 Filesystem

Javascript 如何使用chrome应用程序文件系统api执行文件保存？

javascript

Javascript 如何使用chrome应用程序文件系统api执行文件保存？,javascript,google-chrome-app,html5-filesystem,Javascript,Google Chrome App,Html5 Filesystem,我正在浏览Chrome应用程序，我一直在尝试使用文件系统API保存文件根据我对描述的理解，我应该能够打开并读取文件，然后使用相同的FileEntry创建可写FileEntry对象并替换文件内容我能够选择和读取文件内容，覆盖似乎几乎可以工作。控制台输出使我相信文件是编写的，但内容实际上没有改变。这是我的代码和输出 manifest.json { "manifest_version": 2, "name": "angular toots", "version": "1", "ic

我正在浏览Chrome应用程序，我一直在尝试使用文件系统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"
}

<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>

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

index.html

{
  "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"
}

<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>

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

当我单击Load，然后单击Save时，我会在控制台中得到它

> 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

但是，目标文件的内容不变

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

我遗漏了什么？

您需要使用。您需要至少询问用户一次文件的保存位置，然后您可以保留条目以再次写入同一文件/文件夹

使用

chrome.fileSystem.chooseEntry（{'type'：“openDirectory”}）

弹出提示，要求用户选择一个目录，但我找不到保存到该目录的方法

声明对

文件系统API的权限

：

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

然后，通过使用，您可以在目录中创建文件：

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

你需要使用。您需要至少询问用户一次文件的保存位置，然后您可以保留条目以再次写入同一文件/文件夹

使用

chrome.fileSystem.chooseEntry（{'type'：“openDirectory”}）

弹出提示，要求用户选择一个目录，但我找不到保存到该目录的方法

声明对

文件系统API的权限

：

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

然后，通过使用，您可以在目录中创建文件：

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