在React js中上传之前的多个图像预览？

Question

import React, { Component } from "react";

class uploader extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onImageChange = event => {
    if (event.target.files && event.target.files[0]) {
      let reader = new FileReader();
      reader.onload = e => {
        this.setState({ images: e.target.result });
      };
      reader.readAsDataURL(event.target.files[0]);
    }
  };
  render() {
    return (
        <div class="preview">
          <img id="target" src={this.state.image} />
        </div>
        <div>
          <input id="imageupload" type="file" onChange={this.onImageChange} />
        </div>
    );
  }
}

export default uploader;

我正在尝试显示用户选择的图像预览，一旦用户选择第二张图像，前一张图像就会被新图像替换，但我想在预览部分显示这两个图像。我们怎么能这样做？提前感谢

Answer 1

当前和以前的图像预览

一旦您选择第二张图片，两者都会显示（当前和上一张）。

import React from "react";
const dummy = "https://static.thenounproject.com/png/625182-200.png";
class MultipleImageUpload extends React.Component {
  state = { current: null, old: [] };
  uploadImage = e => {
    const { current, old } = this.state;

    this.setState(
      {
        current: URL.createObjectURL(e.target.files[0])
      },
      () => {
        this.setState({ old: [...old, current] });
      }
    );

    this.setState({ current: URL.createObjectURL(e.target.files[0]) });
  };
  render() {
    console.log(this.state);
    const { old, current } = this.state;
    return (
      <div className="App">
        <div>
          <h3>Current</h3>
          <img
            src={current ? current : dummy}
            alt="custom-pic"
            style={{ height: 100, width: 100 }}
          />
        </div>
        <hr />
        {old
          ? old.map((o, i) => (
              <img
                src={o ? o : dummy}
                key={i.toString()}
                alt="preview"
                style={{ height: 100, width: 100 }}
              />
            ))
          : ""}

        <input type="file" onChange={this.uploadImage} />
      </div>
    );
  }
}
export default MultipleImageUpload;