问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

fileReader.onload里嵌套的 img.onload 里面获取不到外部的变量（异步，闭包）

头像
Rick
    1781719

    代码如下：

    <!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>

    找了半天没找到原因，求帮助

    vue.jshtml5htmljavascript
    阅读 6k
    1 个回答
    得票最新
    头像
    papersnake
      12k31739
      ✓ 已被采纳

      img.onload 哪个教程或者文档告诉你 它是带参的

      自说自话的，加了三个参数进去，

      img.onload 是被谁调用的，先要搞清楚

      <!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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题