【问题标题】:Chrome Apps : How to save blob content to fileSystem in the background?Chrome 应用程序:如何在后台将 blob 内容保存到文件系统?
【发布时间】:2016-04-04 12:58:11
【问题描述】:

在 Chrome 应用程序中,我使用 JavaScript XHR 从服务器下载 blob 内容(特别是 Angular $http GET,响应类型为“blob”)

我应该如何将它保存到 chrome 应用程序的文件系统中?

目前在 HTML5 文件系统 API 上使用 Angular 包装器 https://github.com/maciel310/angular-filesystem

我不想向用户显示弹出窗口(因此我不能使用 chrome.fileSystem. chooseEntry

chrome.fileSystem.requestFileSystem API 仅受仅限 Kiosk 的应用支持。 因此我使用 HTML5 FileSystem API 而不是 chrome。

我正在使用以下代码让 XHR 获取 blob。

 $http({
          url: SERVER_URL+"/someVideo.mp4",
          method: "GET",
          responseType: "blob"
      }).then(function(response) {
          console.log(response);
          fileSystem.writeBlob(response.name, response).then(function() {
             console.log("file saved");
          }, function(err) {
              console.log(err);
          });
      }, function (response) {

      });

这是我的 writeBlob 方法

writeBlob: function(fileName, blob, append) {
    append = (typeof append == 'undefined' ? false : append);

    var def = $q.defer();

    fsDefer.promise.then(function(fs) {

        fs.root.getFile(fileName, {create: true}, function(fileEntry) {

            fileEntry.createWriter(function(fileWriter) {
                if(append) {
                    fileWriter.seek(fileWriter.length);
                }

                var truncated = false;
                fileWriter.onwriteend = function(e) {
                    //truncate all data after current position
                    if (!truncated) {
                        truncated = true;
                        this.truncate(this.position);
                        return;
                    }
                    safeResolve(def, "");
                };

                fileWriter.onerror = function(e) {
                    safeReject(def, {text: 'Write failed', obj: e});
                };

                fileWriter.write(blob);

            }, function(e) {
                safeReject(def, {text: "Error creating file", obj: e});
            });

        }, function(e) {
            safeReject(def, {text: "Error getting file", obj: e});
        });

    }, function(err) {
        def.reject(err);
    });

    return def.promise;
},

这将SECURITY_ERR 显示为It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources.

解决办法是什么?

我尝试在启动应用程序时使用--allow-file-access-from-files 标志。没用。

【问题讨论】:

  • 当您说您不想显示 popup.html 时,您的意思是您不想出现弹出窗口吗?是否意味着您需要通过单击方法从正在查看的选项卡运行脚本?
  • 我的意思是视频应该在后台自动保存。它不应该提示用户在哪里保存,这发生在 choosEntry mefhod
  • 您是否接受了另一个问题的答案作为 n 答案?
  • 您的清单的“权限”字段中是否有匹配模式为您提供 SERVER_URL 的主机权限? (我不记得这是否与应用程序相关;可能与扩展程序有关)

标签: javascript angularjs google-chrome google-chrome-app html5-filesystem


【解决方案1】:

为了对此进行扩展,这里有一个完整的示例应用程序,介绍如何下载文件并保存 blob 并将其显示给用户。

https://github.com/PierBover/chrome-os-app-download-example

【讨论】:

    【解决方案2】:

    Chrome 应用程序的沙盒存储不允许将文件存储在根目录中(即 /

    修改代码以将其保存在其下的特定子目录中。 例如 -

    fileSystem.writeBlob("/new"+response.name, response).then(function() {
                 console.log("file saved");
              }, function(err) {
                  console.log(err);
              });
    

    这将成功地将文件保存在/new/ 目录下。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-02-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-05
    • 2021-04-04
    • 1970-01-01
    相关资源
    最近更新 更多