【问题标题】:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided未捕获的类型错误:无法在“URL”上执行“createObjectURL”:未找到与提供的签名匹配的函数
【发布时间】:2019-05-20 18:14:11
【问题描述】:

这是下载文件并持久化到数据库的js代码:

 <script type="text/javascript"> 
      (function () {        
 
 window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                    window.mozIndexedDB || window.OIndexedDB || 
                    window.msIndexedDB;
                      
 var IDBTransaction = window.IDBTransaction || 
                      window.webkitIDBTransaction || 
                      window.OIDBTransaction || 
                      window.msIDBTransaction;
                        
 var dbVersion = 1.0; 
 var indexedDB = window.indexedDB;
 var dlStatusText = document.getElementById("fetchstatus");

 // Create/open database
 var request = indexedDB.open("Syafunda_Videos", dbVersion),
    db,
    createObjectStore = function (dataBase) {
        dataBase.createObjectStore("Videos",{ keyPath: "id", autoIncrement:true });
    },    

    getVideoFile = function () {
       var xhr = new XMLHttpRequest(),
       blob;
       // Get the Video file from the server.
       xhr.open("GET", "<?php echo $name ?>", true);     
       xhr.responseType = "blob";
       xhr.addEventListener("load", function () {
          if (xhr.status === 200) {
              blob = xhr.response;
              addVideoInDb(blob);
              dlStatusText.innerHTML = "DOWNLOAD COMPLETE: Video file downloaded.";
          }
          else {
              dlStatusText.innerHTML = "ERROR: Unable to download video.";
          }
        }, false);
        xhr.send();
    },

    addVideoInDb = function (blob) {
       var transaction = db.transaction(["Videos"], "readwrite");
       var add = transaction.objectStore("Videos").put(blob);
       //console.log(objectStore.autoIncrement);
  
    };


  request.onerror = function (event) {
      console.log("Error creating/accessing IndexedDB database");
  };

  request.onsuccess = function (event) {
      console.log("Success creating/accessing IndexedDB database");
      db = request.result;

      db.onerror = function (event) {
          console.log("Error creating/accessing IndexedDB database");
      };
       
      getVideoFile();
      
  }
   
  // For future use. Currently only in latest Firefox versions
  request.onupgradeneeded = function (event) {
      createObjectStore(event.target.result);
  };
    
})();</script>

我正在尝试从 indexedDB 中检索文件。我不断在控制台中收到该错误:这是用于从数据库中检索文件的 js 代码,这是我收到错误的地方:

未捕获的类型错误:无法在“URL”上执行“createObjectURL”:未找到与提供的签名匹配的函数。 在 IDBRequest.transaction.objectStore.get.onsuccess)

我哪里出错了?这是我的 JS 代码的 sn-p。一些指针会很棒:

<script type="text/javascript"> 

      (function () {
    // IndexedDB
    window.indexedDB = window.indexedDB || window.webkitIndexedDB || 
                       window.mozIndexedDB || window.OIndexedDB || 
                       window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || 
                     window.webkitIDBTransaction ||
                     window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1.0;
 
    var indexedDB = window.indexedDB;
 
    // Create/open database
    var request = indexedDB.open("Syafunda_Videos");
     
    request.onerror = function (event) {
        // Failed to Open the indexedDB database
    };
 
    request.onsuccess = function (event) {
        db = request.result;
         
        // Open a transaction to the database
        var transaction = db.transaction(["Videos"], "readwrite");
 
        //Retrieve the video file
        transaction.objectStore("Videos").get("2").onsuccess = 
        function (event) {        
          
        var videoFile = event.target.result;
        var URL = window.URL || window.webkitURL;
        var videoURL = URL.createObjectURL(videoFile);
      
       
        // Set video src to ObjectURL        
        var videoElement = document.getElementById("Video");
        videoElement.setAttribute("src", videoURL);
 
       var mimeDisplayElement = document.getElementById("vidMimeDisplay");
           mimeDisplayElement.innerHTML = videoFile.type;
        };
    }
})();

</script>

【问题讨论】:

  • 你能分享一个正在存储的数据的例子,以及执行数据存储的代码吗? videoFile 变量的变量类型是什么(如字符串、日期、对象等)?
  • @Josh,我已经编辑了帖子以添加用于存储数据的 js 代码。 VideoFile 是一个对象变量。我基本上是在客户端将视频下载和存储为 blob。
  • 谢谢,这应该可以帮助某人回答您的问题。完全猜测,但是关于 id 属性和 blob 存储的一些东西,不确定这是否有效。
  • @Josh,抱歉回复晚了。让我看看,谢谢指点。
  • 只是为了评论我遇到的这个问题,我无法检索我的视频的原因是因为在获取视频时,我已将关键路径 ID 用双引号括起来但它不是字符串,只是更改这解决了我的问题,以防有人遇到同样的问题

标签: javascript indexeddb html5-appcache


【解决方案1】:

在获取视频时,我将:get("2") 更改为 get(2) 就像这样

//Retrieve the video file
        transaction.objectStore("Videos").get(2).onsuccess = 
        function (event) {  //code...}     

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-04
    • 2017-06-19
    • 1970-01-01
    相关资源
    最近更新 更多