Reactで複数枚の画像を扱う時のメモ

はじめに

今回は、React での複数枚画像の扱い方をメモです。

完成見本

今回作成する見本は、こんな感じのものです。

See the Pen image uplode by oq-Yuki-po (@oq-yuki-po) on CodePen.

ソースコード

コンポーネントは 2 つで成り立っています。

ImageList : 画像のリストを保持するコンポーネント
Image : 画像を保持するコンポーネント

Image は img タグを使用して、画像を表示しているのみです。

Imageコンポーネント

import React, { Component } from "react";

export default class Image extends Component {
  render() {
    return (
      <React.Fragment>
        <img
          src={this.props.file}
          alt={this.props.name}
          className="image"
        ></img>
      </React.Fragment>
    );
  }
}

ImageListコンポーネント

import React, { Component } from "react";
import Image from "./Image";

// inputタグで受け取った画像をbase64形式に変換するための関数です。
function getBase64(file, cb) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    cb(reader.result);
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}

export default class ImageList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ImageId: 1,
      SelectedImageList: []
    };
    this.handleChangeFile = this.handleChangeFile.bind(this);
  }

  handleChangeFile(e) {
    let files = e.target.files;
    for (let i = 0; i < files.length; i++) {
      // getBase64()は非同期なので、結果を取得したら
      // Imageコンポーネントを作成して追加していく
      getBase64(files[i], result => {
        let NewSelectedImageList = this.state.SelectedImageList;
        NewSelectedImageList.push(
          <Image
            key={this.state.ImageId}
            id={this.state.ImageId}
            name={files[i].name}
            file={result}
          />
        );
        this.setState({ SelectedImageList: NewSelectedImageList });
        this.setState({ ImageId: this.state.ImageId + 1 });
      });
    }
  }
  render() {
    return (
      <section>
        <h3>Multiple file selection Sample</h3>
        <label htmlFor={"input-label"} className="label">
          <span className="name">Add Images</span>
          <input
            id={"input-label"}
            type="file"
            ref="file"
            multiple="multiple"
            style={{ visibility: "hidden" }}
            onChange={this.handleChangeFile}
          />
        </label>
        <div className="full-screen-list">{this.state.SelectedImageList}</div>
      </section>
    );
  }
}

まとめ

Reactでの複数枚の画像が扱える様になりました。
これで、外部のAPIに画像をバシバシ送信できますね。