IndexedDB：将文件存储为File或Blob或ArrayBuffer。什么是最好的选择？ [英] IndexedDB: Store file as File or Blob or ArrayBuffer. What is the best option?

问题描述

现在大多数浏览器都支持IndexedDB直接将数据/文件存储为文件， Blob 或 ArrayBuffer 。

Now most of browsers are supporting IndexedDB to store data/file directly as File, Blob or ArrayBuffer.

此代码将IDB密钥File1保存为文件

This code saves a IDB key 'File1' as File

<input type="file" id="userfile" />
var a = document.getElementById("userfile");
var b = a.files[0];

现在我们可以使用以下代码直接将此文件保存到IDB

Now we can directly save this file to IDB using the following code

//LocalForage is a library for indexedDB developed by Mozilla
//Note: localforage._config.driver=asyncStorage (IDB method)
function run(){
  //"File1" = IDB data table key and b=value
  localforage.setItem("File1", b, function(err, value) {
    console.log(err)
  });
}

a.onchange = function(){
  run()
}

此代码将IDB密钥BlobFile保存为 Blob

This code saves a IDB key 'BlobFile' as Blob

mb = new Blob([b],{type:b.type});

function runB(){
  localforage.setItem("BlobFile", mb, function(err, value){
    console.log(err)
  });    
}

a.onchange = function(){
  runB()
}

我想知道将文件存储到IDB的最佳做法是什么。 （文件/ Blob / ArrayBuffer）

I want to know what is the best practice to store the file to IDB. (File/Blob/ArrayBuffer)

这些文件可能是图片或非常小的视频。

The files could be images or very small size videos.

推荐答案

这是一个有争议的问题，但我们可以在这里画一些线，我在这里引用MDN：

This is a debatable matter, but there are some lines we can draw here, I am quoting MDN here:

File接口基于Blob，继承blob功能并将其扩展为支持用户系统上的文件。

The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

所以在文件之间和Blob一样，这是一个需要的功能问题（我的偏好是blob，因为它更方便）。

so between file and blob, it's a matter of needed functionality (my preference is blob as it's a bit more handy).

现在在blob和ArrayBuffer之间，这个很棘手，因为它完全取决于你需要什么，ArrayBuffer在某些情况下是非常有用的，但它是一个结构化的，它是一个

now between blob and ArrayBuffer, this one is tricky, since it totally depends on what you need, ArrayBuffer is very helpful in some cases but it's a structured and it's a

二进制数据的固定长度容器

fixed-length container for binary data

所以你的文件大小可以产生巨大的差异。

so your file size can make a huge difference.

另一个大的重点是，ArrayBuffer在内存中，而blob可以是一个在哪里，磁盘或内存，所以使用blob你可能会减少很多。
所以对于你的情况，imho，blob获胜。

another big point is, ArrayBuffer is in-memory, while blob can be any where, disk or memory, so with using blob you might be reducing over head a lot. so for your case, imho, blob wins.

现在在旁注，我不知道你要做什么，但存储db中的整个文件不是一个好主意，除非你的目标是索引整个文件内容并查询它，因为并非所有用户设备都能处理这种类型的重载，因此，如果你不需要内容，请索引仅限文件名，它可以节省时间和存储空间。

now on a side note, I don't know what you are trying to do exactly, but storing the whole file in a db is not a good idea unless your target is indexing the whole file content and querying it, because, not all user devices can handle that type of overload, so, if you don't need the content, index the file names only, it saves time and storage space.

我希望这会有所帮助。

这篇关于IndexedDB：将文件存储为File或Blob或ArrayBuffer。什么是最好的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！