如何在filereader onload回调中访问本地变量

时间:2018-02-13 19:21:43

标签: javascript reactjs file-upload callback

我在React中进行文件上传操作,我需要读取用户上传的文件,并根据此文件进行一些状态更改。我现在所拥有的内容如下所示,我需要访问startInt回调中的变量onload,但此处仍未使用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://stackoverflow.com/a/16937439/6366329

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

1 个答案:

答案 0 :(得分:0)

您可以访问本地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);
    };