LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@KyleChen

Reactを使ってブログサイトを作る 09 - 画像のアップロード

Last updated at Posted at 2024-12-30

画像アップロードの静的構造

image.png
image.png

画像アップロード機能の実装

  • Uploadコンポーネントにaction属性を追加し、カバー画像のアップロードインターフェースのURLを設定
  • Uploadコンポーネントにname属性を追加し、インターフェースが要求するフィールド名を指定
  • UploadにonChange属性を追加し、イベント内で現在の画像データを取得してReactの状態に保存
    image.png
    image.png

アップロードアイコンの表示・非表示の制御

  • ユーザーが選択したカバー画像の数に応じてアップロードコンポーネントの表示を制御
  • つまり、ユーザーが「No pic」を選択した場合、アップロードアイコンは表示されず、それ以外の場合には表示される
    image.png

最大アップロード画像数の制御

  • maxCount属性を使用して、画像のアップロード可能な数を制限
  • 例えば、ユーザーが「1 pic」を選択した場合、最大で1枚の画像しかアップロードできず、「3 pic」を選択した場合、最大で3枚の画像のみアップロードできるように制限
    image.png

画像付きの記事を投稿

  • まず、画像の種類と数量が一致するかを検証
  • 次に、画像リストをインターフェース形式に変換

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?