Question

Chrome：由于错误“未捕获的 ReferenceError：未定义 FileError”而无法使用 FileSystem API

2019-07-16

1839

javascript google-chrome google-chrome-extension html5-filesystem

我正在开发一个 Chrome 扩展程序，它将从驱动器读取文件。出于测试目的，我使用在线提供的代码来测试 FileSystem API。运行时出现错误

Uncaught ReferenceError：FileError 未定义

我在 OSX 上。我甚至通过以下方式添加了标志，但没有任何区别：

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

我做错了什么？下面给出的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Chrome File API tester</title>

    <script>
        window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

        // Handle errors
        function errorHandler(e) {
            var msg = '';

            switch (e.code) {
                case FileError.QUOTA_EXCEEDED_ERR:
                    msg = 'QUOTA_EXCEEDED_ERR';
                    break;
                case FileError.NOT_FOUND_ERR:
                    msg = 'NOT_FOUND_ERR';
                    break;
                case FileError.SECURITY_ERR:
                    msg = 'SECURITY_ERR';
                    break;
                case FileError.INVALID_MODIFICATION_ERR:
                    msg = 'INVALID_MODIFICATION_ERR';
                    break;
                case FileError.INVALID_STATE_ERR:
                    msg = 'INVALID_STATE_ERR';
                    break;
                default:
                    msg = 'Unknown Error';
                    break;
            };
            console.log('Error: ' + msg);
        }

        // Init and write some data to a file
        function onInitFs(fs) {
            fs.root.getFile('log-f-api.txt', {create: true}, function(fileEntry) {

                fileEntry.isFile === true;
                fileEntry.name == 'log-f-api.txt';
                fileEntry.fullPath == '/log-f-api.txt';
                // Create a FileWriter object for our FileEntry (log.txt).
                fileEntry.createWriter(function(fileWriter) {

                    fileWriter.onwriteend = function(e) {
                        console.log('Write completed.');
                    };

                    fileWriter.onerror = function(e) {
                        console.log('Write failed: ' + e);
                    };

                    // Create a new Blob and write it to log.txt.
                    if (!window.BlobBuilder && window.WebKitBlobBuilder)
                        window.BlobBuilder = window.WebKitBlobBuilder; // in Chrome 12.
                    var bb = new BlobBuilder();
                    bb.append("some stuff");
                    console.log("bb size:"+bb.size);
                    bb.append('put some nice text in our file....');
                    var ourData = bb.getBlob('text/plain');
                    fileWriter.write(ourData);
                }, errorHandler);
            }, errorHandler);
        }

        // start the party
        $(function() {
            document.getElementById('hello').innerHTML = 'start the tests';
            window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs,errorHandler);
        });

    </script>

</head>
<body>
<p id="hello">Tester FIle API</p>

<h4>Other links</h4>
<ul>
    <li>http://code.google.com/chrome/extensions/trunk/fileBrowserHandler.html#event-onExecute</li>
    <li>http://html5rocks.com</li>
</ul>

</body>
</html>

Answer 1

正如@wOxxOm 指出的那样，FileError 已经过时，应该避免使用。

DOMError 接口也已弃用。

只需使用此处的错误代码更新 errorHandler 函数即可： https://developer.mozilla.org/en-US/docs/Web/API/FileError#Error_codes

Answer 2

FileError objects are passed to error callbacks.

https://developer.mozilla.org/en-US/docs/Web/API/FileError

您的代码中没有 errorHandler 。

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFS, errorHandler); // This is missing

来源 - https://code.tutsplus.com/tutorials/toying-with-the-html5-file-system-api--net-24719 。