reader.readAsDataURL(file); 方法详解

reader.readAsDataURL(file)是一个用于读取文件内容并进行编码的JavaScript函数。它是FileReader API的一部分，可以用于在浏览器中读取和处理文件，在文件上传、图像处理、音频播放等场景下非常有用。

具体来说，reader.readAsDataURL(file)会读取指定的文件内容，并将其编码成Base64格式的数据URL。这个数据URL可以用于显示图像、创建下载链接等操作，因为它包含了文件的完整内容。

该函数的参数file是一个File对象，它包含了待读取的文件相关的信息，如文件名、大小、类型等。当读取完成后，reader对象会触发load事件，说明文件已经成功读取并编码成可用的Base64数据URL。

以下是一个示例，说明如何使用reader.readAsDataURL(file)读取图片文件：

let input = document.querySelector("input[type='file']");
let reader = new FileReader();

input.addEventListener("change", function(e) {
  let file = e.target.files[0];
  reader.readAsDataURL(file);
});

reader.addEventListener("load", function() {
  let img = document.createElement("img");
  img.src = reader.result;
  document.body.appendChild(img);
});

在这个示例中，我们绑定了一个change事件到一个文件上传框，当用户选择一个图片文件时会触发该事件。然后我们使用reader.readAsDataURL(file)方法读取该文件，并将其编码成Base64格式的URL。最后，我们把这个URL传递给一个<img>元素的src属性，并将其添加到页面中以显示该图片。