Загрузка изображений в состояние реакции

Nicolas Albarracin спросил: 28 марта 2018 в 03:18 в: image

Я работаю над загрузкой изображений в свое приложение-ответ, идея состоит в том, чтобы сохранить изображения в моем объекте, отправить его на задний план и загрузить их в клодикальный, но прямо сейчас я не могу помещать файлы в свой объект array:

Компонент:

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);

модель объекта:

export default class Dwelling {
    _id = undefined;
    publicationType = '';
    address = {
        address: '',
        latitude: null,
        longitude: null
}
    images = [];
constructor(obj) {
        Object.assign(this, obj);
    }
}

, когда я пытаюсь загрузить изображение i get this error: New3.js: 51 Uncaught TypeError: Невозможно прочитать свойства 'images' of undefinedat Dropzone. (New3.js: 51)

1 ответ

ionizer ответил: 31 марта 2018 в 07:16

Это мой пример моего предпросмотра с FileReader. Однако это только один файл, поэтому вы можете настроить его для своего приложения.

class Preview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      previewSrc: ''
    }
  }

  handlePreview = (e) => {
    e.preventDefault();

    let file = e.target.files[0];
    let reader = new FileReader();

    if (e.target.files.length === 0) {
      return;
    }

    reader.onloadend = (e) => {
      this.setState({
        previewSrc: [reader.result]
      });
    }

    reader.readAsDataURL(file);
  }
  
  render() {
    return (
      <div id="previewer">
        <input type="file" onChange={this.handlePreview} />
        <h1>Preview</h1>
        <img src={this.state.previewSrc} alt="" />
      </div>
    );
  }
}

ReactDOM.render(<Preview/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

<div id="root"></div>

Литература:

  • https://developer.mozilla.org/en-US/docs/Web/API/FileReader