前端开发必知！图片上传时怎么实现本地预览？

本地预览功能通常是通过 JavaScript 和浏览器提供的 File API 实现的。这个 API 可以让您在 JavaScript 中处理与上传文件相关的信息，包括文件大小、格式和内容等。

当用户选择一个文件后，JavaScript 会读取文件并将其转换为一个数据 URL（或 blob URL）。数据 URL 是一种编码形式，实际上是一个包含文件内容的字符串，可以直接用于创建图像或其他媒体类型的对象。Blob URL 则是指向一个二进制数据文件的 URL，也可以用于创建 blob 对象。

用数据 URL 创建图像或其他媒体类型对象后，就可以将其显示在页面中，实现本地预览的功能。

以下是一些示例代码：

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

<script>
function previewFile() {
  var preview = document.querySelector('img');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
</script>

上述代码中，当用户选择文件后，会执行 previewFile() 函数。该函数首先获取用户选择的文件对象，然后创建一个 FileReader 对象，用于读取文件内容。当读取完成后，会将文件转换为数据 URL，并将其设置为图像的 src 属性，从而在页面中显示预览效果。