You must use a FileReader to compare them

The documentation for FileReader is on MDN. Take a look at methods to choose what's best for your data.

A useless way of comparing two blobs is looking at their size. Although two blobs of the same size will return true no matter their content.

Example

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

Full code:

const input = document.querySelector('input');
input.addEventListener('change', async (e) => {

  e.preventDefault();

  const { files } = e.target; // <= Contains the FileList

  if ( files.length < 2 || files.length > 2 ){
    return console.log("Please select 2 files!");
  }

  // A) Convert files to ArrayBuffer:
  const arrayBufferFileA = await e.target.files[0].arrayBuffer();
  const arrayBufferFileB = await e.target.files[1].arrayBuffer();

  // Stop if the files are not the same size:
  if ( arrayBufferFileA.byteLength !== arrayBufferFileB.byteLength ){
    return console.log("Files are not the same size!");
  }

  // B) Convert ArrayBuffer to Uint8Array for byte-size comparison:
  const uint8ArrayA = new Uint8Array(arrayBufferFileA);
  const uint8ArrayB = new Uint8Array(arrayBufferFileB);
  
  let filesAreTheSame = true;

  for (let i = 0, len = uint8ArrayA.length; i < len; i++) {
    if ( uint8ArrayA[i] !== uint8ArrayB[i] ){
      filesAreTheSame = false;
      break;
    }
  }

  if ( filesAreTheSame ){
    console.log("Files are the same!");
  } else {
    console.log("Files are not the same!");
  }

})

<input type="file" multiple>

I think "blob compare" plug-in will be help you. It can compare blob size,type and so on. https://www.npmjs.com/package/blob-compare

but I don't know if this plug-in is the perfect way.

Unfortunately, this is a case of comparing two completely independent pointers that reference comparable content. To see how this might work for simpler content, try the following in the javascript console:

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

Returns false. Frustrating that 5 as an object does not equal an object whose value is 5. But at least this puts Blob into context.

I'm running into this same problem, and agree with the previous suggestion that FileReader is the only option.

The question was asked in context of JavaScript in the browser, but in case anyone wants to compare blobs in Node.js:

const areBlobsEqual = async (blob1, blob2) => {
  return !Buffer.from(await blob1.arrayBuffer()).compare(
    Buffer.from(await blob2.arrayBuffer())
  );
};

See this answer to a similar question: https://stackoverflow.com/a/77342813/6122411

In short, it is to Convert the File/Blob to ArrayBuffer using FileReader. Then perform byte-to-byte check on the buffer. A library is recommended in that above answer.

Convert Blobs to Base64 and then compare the strings

This solution:

• works in the browser
• is simple and requires no library
• might not have the best performance

First, we create a function that converts blobs (including files) into base64 strings:

export function blobToBase64(blob: Blob) {
    return new Promise<string>((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result as string);
        reader.onerror = (error) => reject(error);
        reader.readAsDataURL(blob);
    });
}

Then we use that function to compare the base64 strings of two blobs:

export async function compareBlobs(a: Blob, b: Blob): Promise<boolean> {
    return (await blobToBase64(a)) === (await blobToBase64(b));
}