SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FileReader 实例</title>
  </head>
  <body>
    <h3>FileReader 实例</h3>
    <input type="file" onchange="loadFile(event)" />
    <input type="button" value="释放URL" onclick="release()" />
    <img id="previewContainer" />
    <script>
      let objectUrl;
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function (evt) {
        //   console.log(evt, evt.target.result);
          const output = document.querySelector("#previewContainer");
          output.src = reader.result;
        };
        // reader.readAsArrayBuffer(event.target.files[0]);
        // reader.readAsText(event.target.files[0]);
        reader.readAsDataURL(event.target.files[0]);
        objectUrl = URL.createObjectURL(event.target.files[0]);
        console.log('url', objectUrl);
        window.open(objectUrl);
      };
      const release = () => {
          if (objectUrl) {
              console.log('释放objectUrl', objectUrl);
              URL.revokeObjectURL(objectUrl);
          }
      };
    </script>
  </body>
</html>