javascript - 使用 blob、XMLHttpRequest 和 WebSQL - 尝试将 blob 保存到 WebSQL 中，然后恢复到 window.URL.createObjectURL

Question

这是我在 stackoverflow 上的第一个问题。我尝试在这里和 Google 上搜索方法:

将文件转换为blob，将其保存在WebSQL中，然后从数据库中选择它并使用window.URL.createObjectURL显示

所以...几乎所有事情都已完成，我已经将 XMLHttpRequest 转换为 blob，并将其保存到 WebSQL 中(我选择了 WebSQL 用于移动使用目的)，但我不知道如何重新转换二进制文本生成 blob 并使用 window.URL.createObjectURL 打开。我已经尝试了多种方法来做到这一点，包括使用 Blob 生成器，它会写入 URL，但什么也没有(404 错误)

这是我的代码，注释是葡萄牙语，但有任何问题，尽管问。我将查询设置为 ID=1 和 result[0] 只是为了测试。



<pre><code><script>
window.URL = window.URL || window.webkitURL; //Instancia o window.URL
var xhr = new XMLHttpRequest(); //Instancia o XHMLHttpRequest

window.onload = function(){
var status = document.getElementById("status");
status.innerHTML = "Aplicação Carregada";


potti.webdb.open();//Abre o Banco
potti.webdb.createTable();//Cria a tabela

getBinary("http://www.belenosonline.com/Blob/1.pdf");//Pega o arquivo

}//Fim onload

function getBinary(url){
if(xhr != null){//Se ele conseguir criar o HMLHttpRequest
xhr.open("GET", url, true);//Abre a conexão GET para o arquivo de forma assincrona (true)
xhr.responseType = "text";
xhr.onreadystatechange = xhrHandler;//State Handler
xhr.send(null);//Não envia nada
}
else{
alert("Seu navegador não é suportado, por favor, atualize-o");
}
}

xhrHandler = function(){
if(xhr.readyState == 3){
status.innerHTML = "Carregando Arquivo";
}
else if(xhr.readyState == 4){
if(xhr.status == 200){
status.innerHTML = "Arquivo Carregado com Sucesso";

var conteudo = xhr.responseText;
potti.webdb.insert("Mozilla",conteudo);
}
else{
status.innerHTML = "Houve um erro no processamento do arquivo";
}
}
else{
status.innerHTML = "Houve um erro no processamento do arquivo";
}
}

//Encapsula o Banco de dados
var potti = {};
potti.webdb = {};
potti.webdb.db = null;


//Abre o BD
potti.webdb.open = function() {
var dbSize = 50 * 1024 * 1024; // 50MB
potti.webdb.db = openDatabase("TestBD", "1.0", "Teste", dbSize);
}

//Cria a tabela no banco
potti.webdb.createTable = function() {
var db = potti.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS TestTable(ID INTEGER PRIMARY KEY ASC, nome TEXT ,conteudo TEXT)", []);
});
}

//Insere dados no Banco
potti.webdb.insert = function(nome,conteudo){
var db = potti.webdb.db;
db.transaction(function(tx){
status.innerHTML = "Gravando no Banco";
tx.executeSql("INSERT INTO TestTable(nome, conteudo) VALUES (?,?)",
[nome, conteudo],
potti.webdb.onSuccess,
potti.webdb.onError);
});
}

//Carrega dos dados
potti.webdb.loadData = function() {
var db = potti.webdb.db;
var result = [];
db.transaction(function (tx) {
tx.executeSql("Select * TestTable WHERE ID = 1", [], function(tx, rs){
for(var i=0; i<rs.rows.length; i++) {
var row = rs.rows.item(i);
result[i] = {
"Id" : row["ID"],
"Nome" : row["nome"],
"Conteudo" : row["conteudo"],
};
}
var blob = new Blob([result[0].Conteudo], { type: 'application/pdf' });
console.log(window.URL.createObjectURL(blob));

}, potti.webdb.onError);
});
}

//Erro no Banco de Dados
potti.webdb.onError = function(tx, e) {
console.log("Houve um erro " + e.message);
}

//Sucesso no Banco de Dados
potti.webdb.onSuccess = function(tx, r) {
document.getElementById("status").innerHTML = "Salvo no Banco";
potti.webdb.loadData();
}


</script>
</code></pre>



Answer 1

经过两周的尝试，我在 stackoverflow 上遇到了一个问题:Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python

您必须获取 Arraybuffer > 转换为 Base64 > 存储 > 获取 > 解码为 ArrayBuffer > 创建 Blob