【发布时间】: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