如何在文件读取器 onload 回调中访问局部变量答案

【问题标题】：How to access a local variable in filereader onload callback如何在文件读取器 onload 回调中访问局部变量
【发布时间】：2025-04-26 05:45:01
【问题描述】：

我在React中做一个文件上传操作，我需要读取用户上传的文件，并根据这个文件做一些状态改变。我现在拥有的内容如下所示，我需要在onload 回调中访问变量startInt，但这里仍然没有使用IIFE 定义它

const file = document.getElementById("fileUpload").files[0];
if (file) {
  const reader = new FileReader();
  reader.readAsText(file, "UTF-8");

  reader.onload = ((theFile) => {
    const form = document.getElementById('fileUploadForm');
    const start = datetimeToISO(form.Start.value);
    const startInt = new Date(start).getTime();

    return (e) => {
      console.log(e.target.result);
      //startInt is not defined here
    }
  })(file);
}

如果有帮助，我会按照本指南进行操作：https://*.com/a/16937439/6366329

如果您能指出我的错误，那就太好了。非常感谢提前

【问题讨论】：

我不确定它是否对您有帮助，但这是另一个示例 github.com/strapi/strapi/blob/plugin/img-upload-front/packages/…
但是startInt 是在那里定义的。

标签： javascript reactjs file-upload callback

【解决方案1】：

您可以访问本地 var（但不能访问类 const，例如 this.state.* 或 this .props.*）。所以你需要这样的东西：

    var file = document.getElementById('inputID').files[0]
    var Images = this.props.motherState.Images // Images is array 
    var reader = new FileReader();
    reader.readAsDataURL(file); //

    reader.onload = function () {
        //console.log(reader.result);
        if (file.type.match(/image.*/))           
            Images.push(reader.result) // its ok
        // but  this.props.motherState.Images.push(reader.result)
        // return error like this:
        // Images not define in this.props.motherState.Images
    };



    reader.onerror = function (error) {
        //console.log('Error: ', error);
    };

【讨论】：