リアクトでの貼り付けアップロード機能の実装方法は？

1年 ago
優斗, 朝陽
1 minute

Reactでの貼り付けアップロード機能の実装には、onPasteイベントとFileReaderオブジェクトを使用して貼り付けイベントを処理し、貼り付けされたファイルを読み取ることができます。

以下は、簡単な実装例です。

  1. Reactコンポーネント内で、画像の貼り付けを表示するためにinput要素とimg要素を作成します。
import React, { useRef } from 'react';

const UploadImage = () => {
  const inputRef = useRef(null);
  const imgRef = useRef(null);

  const handlePaste = (e) => {
    const items = e.clipboardData.items;
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.type.indexOf('image') !== -1) {
        const file = item.getAsFile();
        const reader = new FileReader();
        reader.onload = (e) => {
          imgRef.current.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  };

  const handleClick = () => {
    inputRef.current.click();
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        ref={inputRef}
        style={{ display: 'none' }}
      />
      <img
        src=""
        alt=""
        ref={imgRef}
        style={{ maxWidth: '100%', maxHeight: '100%' }}
        onPaste={handlePaste}
      />
      <button onClick={handleClick}>选择图片</button>
    </div>
  );
};

export default UploadImage;
  1. handlePaste関数では、まずクリップボードのすべてのアイテムを取得（e.clipboardData.items）し、それからそれぞれのアイテムをループで処理します。アイテムのタイプが画像を含んでいる場合は、それをファイルオブジェクトに変換します（item.getAsFile()）。次に、FileReaderオブジェクトを使用してファイルをDataURLに読み込み、それをimg要素のsrc属性に設定して貼り付けた画像を表示します。
  2. コンポーネント内では、画像を選択するためにinput要素を使用します。input要素を非表示にし（style={{ display: ‘none’ }}）、inputRefを介して参照します。画像の選択をトリガーするためにボタンを使用し、ボタンをクリックするとinputRef.current.click()を呼び出してファイルの選択をトリガーします。

上記のコード例では、画像を貼り付けてアップロードする機能と画像を選択する機能が実装されています。自分のニーズに合わせて修正や拡張を行うことができます。

bannerAds