JavaScript FileReader中readAsDataURL()、readAsArrayBuffer()和readAsText()的区别

Question

我找到了一个上传图像预览的代码，但是我不明白 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]);
};

- Gowrishankar RJ

---

好的，“readAs” 后面的单词告诉你正在读取的数据类型... 你有什么具体问题吗？ - Alex K.

这一切都在文档中有解释。 - Heretic Monkey

Answer 1

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

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

• .readAsText() 返回文件的数据作为文本字符串。

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

- Matteo Baldi

Answer 2

我认为如果您想要实现文件上传功能并向用户展示他们选择的即将上传的文件预览，则使用.readAsDataURL()。

如果您想要处理文本文件，请使用.readAsText()

如果您想要处理像图片之类的东西（例如将JPEG转换为PNG），则使用.readAsArrayBuffer()。

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

- Fabian Madurai

Answer 3

readAsDataURL() 方法将返回一个字符串，可以粘贴到 HTML 标签的 url 属性中（例如：img 中的 src=）。对于 img 标签，这将有效地显示图像，就像 src 是读取的文件地址一样。它是原始文件内容的转换（更大）。 readAsText() 方法将返回一个字符字符串，可以由 JavaScript 函数解析或在文本区域中显示，并且可能被用户理解。这通常对于阅读文本文件很有用。

- Boog Dow