The img.onload nested in fileReader.onload cannot get external variables (async, closures).

the code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" onchange="fileChoosed(event)">
  <img id="a">
  <script>
    function fileChoosed(event) {
      console.log("aa");
      let file = event.target.files[0],
        fileName = file.name,
        img = document.getElementById("a"),
        fr = new FileReader(),
        ts = this;
      fr.addEventListener("load", () => {
        let blob = "a";
        console.log(fileName, img, blob); //
        img.onload = (img, blob, fileName) => {
          debugger;
          view.insertPicture(img, blob, fileName); //
        };
        img.src = fr.result;
      });
      fr.readAsDataURL(file);
    }
  </script>
</body>

</html>

after searching for a long time, I couldn"t find the reason. Ask for help

Javascript html html5 vue.js

Mar.04,2021

which tutorial or document of img.onload tells you that it is referenced

if you talk to yourself, add three parameters to it.

img.onload is called by whom, it is necessary to find out

first.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" onchange='fileChoosed(event)'>
  <img id='a'>
  <script>
    function fileChoosed(event) {
      console.log('aa');
      let file = event.target.files[0],
        fileName = file.name,
        img = document.getElementById('a'),
        fr = new FileReader(),
        ts = this;
      fr.addEventListener("load", () => {
        let blob = 'a';
        console.log(fileName, img, blob); //
        img.onload = () => { //
          debugger;
          console.log(fileName, img, blob); 
        };
        img.src = fr.result;
      });
      fr.readAsDataURL(file);
    }
  </script>
</body>

</html>

Previous: Cc1: error: unrecognized command line option "- M64"

Next: After the node server deploys the project, you must add a port to access the home page. Is there any way to enter the public network IP to access the home page directly?

How can attachments of H5 interface type be previewed
now the interface has returned to me an interface that directly downloads pdf files, not server source files. How can I preview interface types as follows http: 60.10.25.240 api common UEditorDownload?suburl=ueditor upload file 20180802 1533197094431...

Javascript html html5 vue.js

Apr.05,2021
Vue does a function of moving up and down, but the effect doesn't work.
the interface is as follows: : " " " " " " : finally, I printed out the data, and the location did change, but the interface didn t change. Why? ...

Javascript html html5 vue.js

Dec.23,2021

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea42e7-1cb4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea42e7-1cb4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?