为什么新的FileReader无法在Mozilla和Interner Explorer React / redux中运行

Question

我是React和redux的新手。我正在尝试编写简单的图像上传并获取blob数据以供预览和上传。但我的代码在chrome中工作但是在mozilla和Internet Explorer中我昨天更新了我的mozilla.But我不知道为什么。我知道有很多答案，但没有什么对我有用

    import React from 'react';
import {connect} from 'react-redux';
import uuid from 'node-uuid'
import * as headerAction from '../../Actions/headerActions';
import * as uploadActions from '../../Actions/uploadActions';
import * as notificationActions from '../../Actions/notificationActions';

class Header extends React.Component{
    static contextTypes = {
        router:React.PropTypes.object
    };

    constructor(props){
        super(props);

        this.Hovered = this.Hovered.bind(this);
        this.UnHovered = this.UnHovered.bind(this);
        this.handleFileUpload = this.handleFileUpload.bind(this);

    }
    UnHovered(){
        this.props.toggleMenu(false);
    }
    uniqueNameAndId(){
        return uuid.v1().replace(/-/g, '');
    }
    handleFileUpload(e){
         e.preventDefault();
//Not working in Mozilla and Internet Explorer
         const file = e.target.files;
        console.log(file.length)//Not Working
        if(file.length <= 5){
            for(let i=0;i<file.length;i++){
                const Reader = new FileReader();

                Reader.onload = () => {
                    let pushData = {
                        postOwnerUsername:null,
                        id:this.uniqueNameAndId(),
                        name:this.uniqueNameAndId(),
                        caption:null,
                        blobData:Reader.result
                    };
                    console.log(pushData)
                    this.props.pushtoReducer(pushData)
                };
                Reader.readAsDataURL(file[i])
            }
            this.props.removeUploadMenu(false)
            this.context.router.push('/upload');
        }else{
            console.log('No Dude')
            this.props.popErrorNotification(true,"#FF5D5D","Current Max Photo 5")
        }




    }
    loggedInMenu(){
        return(
            <div>

                <li>Explore</li>
                <li>My uploads</li>
                {this.props.toggle.removeUploadMenu ?
                    <li>
                        <label htmlFor="upload-photo">Upload</label>
                        <input onChange={this.handleFileUpload} id="upload-photo" type="file" multiple/>
                    </li>:
                    ""
                }

                <li>Profile</li>
                <li><a href="/logout">Logout</a></li>
            </div>
        )
    }
    loggedOutMenu(){
        return(
            <div>
                <li onClick={()=>this.props.toogleSignInOut(true)}>SignUp/SignIn</li>
                <li>Explore</li>

            </div>
        )
    }
    renderMenu(){
        return(
            <div onMouseLeave={this.UnHovered}>
                <div  className="dtcen">
                    <div className="dt">

                    </div>
                </div>

                <div className="dropdown">

                    {this.props.logInStatus.loginStatus ? this.loggedInMenu():this.loggedOutMenu()}


                </div>
            </div>
        )
    }
    Hovered(){

        this.props.toggleMenu(true);
    }
    render(){

       // console.log('From uuis',this.uniqueNameAndId())
        //console.log("Login Status",this.props.toggle.removeUploadMenu)

        return(

            <header>
                <div className="logo">
                    <p>Masklor </p>
                </div>
                <div className="navtoggle">
                    <div onMouseEnter={this.Hovered} className="triangle">
                        <p>Menu</p>
                    </div>

                    {this.props.toggle.menuToggle ? this.renderMenu() : ""}

                </div>
            </header>


        )
    }
}

const mapStateToProps = (state) => {
  return{
     toggle:state.toggle,
      logInStatus:state.logInStatus,
      photos:state.photoUpload
  }
};

const mapDispatchToProps = (dispatch) => {
    return{
        toggleMenu:bool => dispatch(headerAction.toggleStatus(bool)),
        toogleSignInOut:bool => dispatch(headerAction.toggleSignPop(bool)),
        pushtoReducer:object => dispatch(uploadActions.setPhotosState(object)),
        popErrorNotification:(bool,color,message) => dispatch(notificationActions.popUpNotification(bool,color,message)),
        removeUploadMenu:bool => dispatch(headerAction.removeUploadMenu(bool))
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header)