Question

过去两天我一直在努力。我有两个文件上传文件框，一切正常，存储在数据库中，但图像不是。文本框数据存储在索引数据库中，但图像不存储在索引数据库中，它显示为image[]的空数组。这是我的javascript添加功能

function add() {
  var a = document.getElementById("userfile");
  var b = a.files[0];

  var request = db.transaction(["todostore"], "readwrite")
  .objectStore("todostore")
  .add({
    timestamp: "KP" + (new Date()).getTime(),
    todo: $("#todo").val(),
    price:$("#toprice").val(),
    image:b
  });

  request.onsuccess = function(event) {
    alert($("#todo").val() + " has been added to your database.");
    $("#todo").val("");
  };
};

这是html的代码。我无法识别错误。

<label for="todo">To Do:</label>
<input id="todo" type="text">
<input id="toprice" type="text">
<input type="file" id="userfile" />

<button onclick="add()">Add</button>

Answer 1

然而，将Blob直接添加到IndexedDB对我来说是个谜。

我们可以使用FileReader将图像添加为base64，如下所示：

function add() {
  var files = document.getElementById("userfile").files
  if (!files || !files.length) return

  var fileReader = new FileReader()
  fileReader.onload = function () {
    var request = db.transaction(["todostore"], "readwrite")
      .objectStore("todostore")
      .add({
        timestamp: "KP" + Date.now(),
        todo: $("#todo").val(),
        price: $("#toprice").val(),
        image: reader.result // changing here
      })
    request.onsuccess = function(event) {
      alert($("#todo").val() + " has been added to your database.")
      $("#todo").val("")
    }
  }
  fileReader.readAsDataURL(file[0])
}

如何使用索引db中的图像从文本框上载数据

1 个答案: