如何比较 JavaScript 中的两个 blob？

Posted 2023-02-27

【中文标题】如何比较 JavaScript 中的两个 blob？

【英文标题】：How to compare two blobs in JavaScript?

【发布时间】：2016-12-20 19:49:45

【问题描述】：

我使用下面的代码在 javascript 中加载了两个 blob 文件。

我想比较一下它们是否完全相同。

(blob1 === blob2) 返回 false，即使每个 blob 的报告大小为 574 字节。我做错了什么？

  getHTTPAsBlob(url, callback) 
    let cacheBust = Math.random().toString()
    url = url + '?&cachebust=' + cacheBust
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function (e) 
      if (xhr.status == 200) 
        // get binary data as a response
        let fileData = this.response;
        let contentType = xhr.getResponseHeader("content-type")
        var reader = new FileReader()
        reader.onload = (e) => 
          console.log(reader.result)
          console.log(fileData)
          callback(null, 
              Body: reader.result,
              Blob: fileData,
              ContentType: contentType,
              Etag: null,
              LastModified: null,
            )
        
        reader.readAsText(fileData)
         else 
        callback(xhr)
      
      
      xhr.send();
    

【问题讨论】：

如果你想比较它的内容（使用 FileReader），我认为你必须阅读“blob”。将 responseType 设置为“arraybuffer”不是更容易吗，尤其是如果它们很小的话？

如果您查看我的代码，您会发现它使用文件读取器从 blob 中获取文本，但这不是重点，比较两个 blob 不需要读取。

@DukeDugal：为什么不需要阅读来比较两个 blob？如果不是通过内容，您还想如何比较它们？

【参考方案1】：

我认为“blob compare”插件会对您有所帮助。 它可以比较 blob 的大小、类型等。 https://www.npmjs.com/package/blob-compare

但我不知道这个插件是不是完美的方式。

【参考方案2】：

您必须使用 FileReader 来比较它们

FileReader 的文档位于 MDN。看看如何选择最适合您的数据的方法。

比较两个 blob 的无用方法是查看它们的大小。尽管无论内容如何，​​两个大小相同的 blob 都会返回 true。

示例

new Blob([Math.random()]).size == new Blob([Math.random()]).size // true.

【参考方案3】：

不幸的是，这是比较两个引用可比较内容的完全独立指针的情况。要了解这对更简单的内容如何起作用，请在 javascript 控制台中尝试以下操作：

new Number(5) == new Number(5)

返回假。令人沮丧的是，5 作为一个对象并不等于一个值为 5 的对象。但至少这将 Blob 置于上下文中。

我遇到了同样的问题，并且同意之前的建议，即 FileReader 是唯一的选择。