使用FileReader（）读取文件以从图像文件生成md5哈希字符串的正确方法？

Question

我目前正在执行此操作（请参见下面的代码段）以获取要上传的图像文件的md5哈希字符串（我将哈希用作fileNames ）：

注意：我正在使用md5包来生成哈希值（ md5其加载到代码段中）。

FileReader()上有4种可用的方法来读取文件。 他们似乎都产生了良好的结果。

• readAsText（文件）
• readAsBinaryString（文件）;
• readAsArrayBuffer（文件）;
• readAsDataURL（文件）;

在这种情况下，我应该使用哪个？为什么？ 您还能解释它们之间的区别吗？

 function onFileSelect(e) { const file = e.target.files[0]; const reader1 = new FileReader(); const reader2 = new FileReader(); const reader3 = new FileReader(); const reader4 = new FileReader(); reader1.onload = (event) => { const fileContent = event.target.result; console.log('Hash from "readAsText()": '); console.log(md5(fileContent)); } reader2.onload = (event) => { const fileContent = event.target.result; console.log('Hash from "readAsBinaryString()": '); console.log(md5(fileContent)); } reader3.onload = (event) => { const fileContent = event.target.result; console.log('Hash from "readAsArrayBuffer()": '); console.log(md5(fileContent)); } reader4.onload = (event) => { const fileContent = event.target.result; console.log('Hash from "readAsDataURL()": '); console.log(md5(fileContent)); } reader1.readAsText(file); reader2.readAsBinaryString(file); reader3.readAsArrayBuffer(file); reader4.readAsDataURL(file); } 

 .myDiv { margin-bottom: 10px; } 

 <script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script> <div class="myDiv">Pick an image file to see the 4 hash results on console.log()</div> <input type='file' onChange="onFileSelect(event)" accept='.jpg,.jpeg,.png,.gif' /> 

Answer 1

使用readAsArrayBuffer 。

readAsBinaryString()和readAsDataURL()将使您的计算机完成比需要完成的工作更多的工作：

1. 将blob读取为二进制流
2. 转换为UTF-16 / base64字符串（记住在js中字符串不是可变的，您对其执行的任何操作实际上都会在内存中创建一个副本）
3. [传递给您的lib]
4. 转换为二进制字符串
5. 处理数据

另外，看来您的库无法处理数据URL，并且无法处理UTF-16字符串。

默认情况下， readAsText()会尝试将二进制数据解释为UTF-8文本序列，这对于二进制数据（如光栅图像）非常不利：

 // generate some binary data document.createElement('canvas').toBlob(blob => { const utf8_reader = new FileReader(); const bin_reader = new FileReader(); let done = 0; utf8_reader.onload = bin_reader.onload = e => { if(++done===2) { console.log('same results: ', bin_reader.result === utf8_reader.result); console.log("utf8\\n", utf8_reader.result); console.log("utf16\\n", bin_reader.result); } } utf8_reader.readAsText(blob); bin_reader.readAsBinaryString(blob); }); 

另一方面， readAsArrayBuffer只会像分配内存中那样分配二进制数据。 简单的I / O，无需处理。
为了处理这些数据，我们可以在该二进制数据上使用TypedArrays视图，这些视图仅仅是视图，也不会产生任何开销。

而且，如果您查看所使用的库 ，它们将把您的输入传递给这样的Uint8Array进行进一步处理。 但是请注意，它们显然需要您传递此ArrayBuffer的Uint8Array视图，而不是直接传递裸ArrayBuffer。