Image 将图像上载到react中的状态

我正在我的react应用程序上上传图像，想法是将图像保存在我的对象中，发送到我的后端并上传到clodinary，但现在我似乎无法将文件放入我的对象数组中：

组成部分：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import {
    Grid,
    Row,
    Col,
    FormControl,
    FormGroup,
    Button,
    ButtonToolbar,
    Label
} from 'react-bootstrap';

import {Dwelling} from '../../../model';
import {requestSaveDwelling} from '../../../actions';

class New3 extends Component {
    static propTypes = {
        requestSaveDwelling: PropTypes.func.isRequired,
        history: PropTypes.shape({
            push: PropTypes.func.isRequired
        }).isRequired,
        dwelling: PropTypes.shape({})
    };

    static defaultProps = {
        dwelling: new Dwelling()
    };

    constructor(props) {
        super(props);
        this.state = {dwelling: new Dwelling()};
        if (this.props.dwelling) {
            this.state = this.props;
        }
    }

    handleChange({target: {id, value}}) {
        this.setState(
            state => ({
                dwelling: (Object.assign(state.dwelling, {[id]: value}))
            })
        );
    }

    handleDrop(file) {
        this.setState(
            state => ({
                dwelling: (Object.assign(state.dwelling.images, file))
            })
        );
    }


    handleSubmit() {
        const {dwelling} = this.state;
        this.props.requestSaveDwelling(dwelling);
        this.props.history.push('/dwellings/latest');
    }

    render() {
        const {dwelling} = this.state;
        console.log(dwelling);
        return (
            <Grid className="animated fadeIn">
                <Row>
                    <Col sm={12}>
                        <h2>Carga de Imágenes</h2>

                        <Dropzone
                            onDrop={this.handleDrop}
                            multiple
                            accept="image/*"
                        >
                            <p>Arrastre Imagenes aquí, o haga click para seleccionar imagenes.</p>
                        </Dropzone>
                        {this.state.dwelling.images.length > 0 ?
                            <div>
                                <h2>Uploading {this.state.dwelling.images.length} files...</h2>
                                <div>{this.state.dwelling.images.map(file => <img src={file.preview}/>)}</div>
                            </div> : null}
                    </Col>
                </Row>
                <Row>
                    <Col sm={12}>
                        <FormGroup controlId="occupationStatus">
                            <Label>Estado Ocupacional</Label>
                            <FormControl
                                componentClass="select"
                                value={dwelling.occupationStatus}
                                placeholder="Seleccione"
                                onChange={e => this.handleChange(e)}
                            >
                                <option disabled label="Seleccione"/>
                                <option value="Disponible" label="Disponible"/>
                                <option value="Alquilada" label="Alquilada"/>
                                <option value="Vendida" label="Vendida"/>
                                <option value="Reservada" label="Reservada"/>
                                <option value="Suspendida" label="Suspendida"/>
                            </FormControl>
                        </FormGroup>
                    </Col>
                </Row>
                <Row>
                    <Col sm={12}>
                        <h2>Descripción General</h2>
                        <FormGroup controlId="generalDescription">
                            <FormControl
                                componentClass="textarea"
                                value={dwelling.generalDescription}
                                onChange={e => this.handleChange(e)}
                                placeholder="Escriba una Descripcion general"
                            />
                        </FormGroup>
                    </Col>
                </Row>
                <Row>
                    <Col sm={12}>
                        <h2>Descripción Privada</h2>
                        <FormGroup controlId="privateDescription">
                            <FormControl
                                componentClass="textarea"
                                value={dwelling.privateDescription}
                                onChange={e => this.handleChange(e)}
                                placeholder="Escriba una Descripcion privada"
                            />
                        </FormGroup>
                    </Col>
                </Row>
                <Row>
                    <Col sm={6}>
                        <ButtonToolbar className="pull-left">
                            <Button href="#/dwellings/new2">Atrás</Button>
                        </ButtonToolbar>
                    </Col>
                    <Col sm={6}>
                        <ButtonToolbar className="pull-right">
                            <Button onClick={() => this.handleSubmit()}>Guardar</Button>
                        </ButtonToolbar>
                    </Col>
                </Row>
            </Grid>
        );
    }
}

export default connect(
    state => ({
        dwelling: state.dwelling.dwelling
    }),
    dispatch => ({
        requestSaveDwelling: dwelling => dispatch(requestSaveDwelling(dwelling))
    })
)(New3);

当我尝试上载图像时，出现以下错误： New3.js:51未捕获类型错误：无法读取未定义的属性“images”

---

在Dropzone。（New3.js:51）

这是我使用FileReader的预览器的示例。但是，这只是一个文件，因此您可能需要为应用程序调整它

类预览扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
previewSrc:'
}
}
handlePreview=（e）=>{
e、 预防默认值（）；
让file=e.target.files[0]；
let reader=new FileReader（）；
如果（e.target.files.length==0）{
返回；
}
reader.onloadend=（e）=>{
这是我的国家({
previewSrc:[读取器.result]
});
}
reader.readAsDataURL（文件）；
}
render（）{
返回(
预览
);
}
}
render（，document.getElementById（“根”））
这是我使用FileReader的预览器的示例。但是，这只是一个文件，因此您可能需要为应用程序调整它


类预览扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
previewSrc:'
}
}
handlePreview=（e）=>{
e、 预防默认值（）；
让file=e.target.files[0]；
let reader=new FileReader（）；
如果（e.target.files.length==0）{
返回；
}
reader.onloadend=（e）=>{
这是我的国家({
previewSrc:[读取器.result]
});
}
reader.readAsDataURL（文件）；
}
render（）{
返回(
预览
);
}
}
render（，document.getElementById（“根”））

你能制作一个CodeSandbox.io示例吗？你能显示组件代码吗？添加了错误i Get Put the full component我知道如何将图像加载到我的组件状态作为预览，如果我想上传，我可以使用它。但我不知道这是否是你想要的。如果有任何问题，您可能希望使用
FileReader
继续阅读。您可以制作一个CodeSandbox.io示例吗？您能够显示组件代码吗？添加了错误“我得到了完整的组件”我知道如何将图像加载到我的组件状态作为预览，如果我愿意，可以使用它上载。但我不知道这是否是你想要的。如果有的话，您可能希望使用
FileReader
export default class Dwelling {
    _id = undefined;
    publicationType = '';
    address = {
        address: '',
        latitude: null,
        longitude: null
}
    images = [];
constructor(obj) {
        Object.assign(this, obj);
    }
}