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]);
};

Answer 1

• .readAsDataURL()返回表示文件数据的URL作为base64编码的字符串

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

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

有关详细信息，请查看此 FileReader文档。

Answer 2

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

readAsText()将返回一个字符串，这些字符可以由JavaScript函数解析或显示在textarea中，并且可能被用户理解。 这通常用于读取文本文件。

Answer 3

我想如果您想要一个文件上传功能，然后向用户显示他们从PC中选择并即将上传的文件的预览，那么请使用.readAsDataURL() 。

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

如果你想操纵像图像（例如将jpeg转换为PNG），那么使用.readAsArrayBuffer() 。

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