Reactから画像ファイルをアップロードしてプレビューを作成

6964 ワード
React preview テキストリンク
写真ファイルをアップロードするときにプレビューを解放する方法

このようにデフォルトの画像を空にしてから、画像をアップロードし、保存する前に画像をプレビューする方法です.

たくさんのブログを見て参考にしましたが、私のような汪楚宝は理解しにくいです.だから、私のように初心者が多いのであれば、理解に役立つのか+忘れないように、記録のために残したメッセージ

1.ビューの作成


簡単な入力ウィンドウを作成し、画像をその空間と画像にアップロードします.
練習なので、簡単にやってみました.
import React from "react";

const Prac = (props) => {
  return (
    <React.Fragment>
      <img src={"/img/profile.png"}></img>
      <input type="file"></input>
    </React.Fragment>
  );
};

export default Prac;

2.UseRefとonChangeを使う


選択したファイルがどのようなものか、onChangeが必要です.
import React from "react";
import { useState, useRef } from "react";

const Prac = (props) => {
  const [imageUrl, setImageUrl] = useState(null);
  const imgRef = useRef();

  const onChangeImage = () => {
    const reader = new FileReader();
    const file = imgRef.current.files[0];
    console.log(file);

    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setImageUrl(reader.result);
      console.log("이미지주소", reader.result);
    };
  };

  return (
    <React.Fragment>
      <img src={"/img/profile.png"}></img>
      <input type="file" ref={imgRef} onChange={onChangeImage}></input>
    </React.Fragment>
  );
};

export default Prac;

3.imgタグに条件を設定する

<img src={imageUrl ? imageUrl : "/img/profile.png"}></img>

イメージがいいですね!

4.ファイル選択ボタンも変更したい場合は…


ボタンを作成し、inputに「none」と表示します.
この状態でボタンを押すと、入力ボタンが押されるので、onClickをボタンに入れます
コード全体がそうです.
import React from "react";
import { useState, useRef } from "react";

const Prac = (props) => {
  const [imageUrl, setImageUrl] = useState(null);
  const imgRef = useRef();

  const onChangeImage = () => {
    const reader = new FileReader();
    const file = imgRef.current.files[0];
    console.log(file);

    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setImageUrl(reader.result);
      console.log("이미지주소", reader.result);
    };
  };

  const onClickFileBtn = (e) => {
    imgRef.current.click();
  };

  return (
    <React.Fragment>
      <img src={imageUrl ? imageUrl : "/img/profile.png"}></img>
      <input
        type="file"
        ref={imgRef}
        onChange={onChangeImage}
        style={{ display: "none" }}
      ></input>
      <button
        onClick={() => {
          onClickFileBtn();
        }}
      >
        이미지 업로드
      </button>
    </React.Fragment>
  );
};

export default Prac;
完成!
いいえ、次はサーバー接続という山がありますが...
今日のPostingはここまで!!
白峻2075号N次大数.
JSON ArrayとJSONオブジェクト