Question

我正在努力在我的反应应用程序上传图像，想法是将图像保存在我的对象中，将其发送到我的后端并将它们上传到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);

对象模型：

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

当我尝试上传图片时出现此错误： New3.js：51 Uncaught TypeError：无法读取undefined的属性'images' 在Dropzone。（New3.js：51）

Answer 1

这是我使用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

将图像上传到状态为

1 个答案:

参考文献：