JavaScript FileReader中readAsDataURL(）与readAsArrayBuffer(）和re

Difference between readAsDataURL() and readAsArrayBuffer() and readAsText() in JavaScript FileReader

本文关键字：readAsArrayBuffer re FileReader readAsDataURL JavaScript      更新时间：2024-03-21

我发现了一个图片上传预览的代码，我很困惑FileRead()中发生了什么？

var openFile = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
        var output = document.getElementById('output');
        console.log(dataURL)
        output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
};

  • .readAsDataURL()返回一个URL，该URL将文件的数据表示为base64编码字符串

  • .readAsArrayBuffer()返回一个ArrayBuffer，表示文件的数据

  • .readAsText()以文本字符串的形式返回文件的数据。

有关更多信息，请查看此FileReader文档。

我认为，如果你想拥有文件上传功能，然后向用户显示他们从电脑上选择并将要上传的文件的预览，那么就使用.readAsDataURL()。

如果要操作文本文件，请使用.readAsText()

如果您想要操作像图像这样的东西（例如，将jpeg转换为PNG），那么请使用.readAsArrayBuffer()。

还有第四种方法.readAsBinaryString，但是Mozilla文档建议使用.readAsArrayBuffer()。

readAsDataURL()将返回一个字符串，该字符串可以粘贴到HTML标记的url属性中（例如：img中的src=）。对于img标签，它将有效地显示图像，就像src是读取的文件的地址一样。它是对原始文件内容的转换（更大）。

readAsText()将返回一个字符串，该字符串可以被JavaScript函数解析或显示在文本区域中，并且可能被用户理解。这通常对阅读文本文件很有用。

相关文章：