react-antdでUploadを使用して、画像のトリミング-アップロード-プレビューの機能を実現します

序文

antd in reactを使用して、画像のアップロード、トリミング、プレビューを実行し、実装プロセスを記録します。これがすべての人に役立つことを願っています。

達成

ここで使用しているのはantdフレームワークです。
画像のアップロード機能を実現するには、プラグインantd-img-cropをインストールする必要があります。

yarn add antd-img-crop

次に、次を使用できます。

import React, {
    
     memo, useState } from 'react'
import {
    
     Upload } from 'antd'
import ImgCrop from ' 
'

export default memo(function Index() {
    
    
  const [fileList, setFileList] = useState([
    {
    
    
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);

  const onChange = ({
     
      fileList: newFileList }) => {
    
    
    setFileList(newFileList);
  };

  const onPreview = async file => {
    
    
    let src = file.url;
    if (!src) {
    
    
      src = await new Promise(resolve => {
    
    
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow.document.write(image.outerHTML);
  };
  return (
    <div>
      <ImgCrop rotate>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
          fileList={
    
    fileList}
          onChange={
    
    onChange}
          onPreview={
    
    onPreview}
        >
          {
    
    fileList.length < 5 && '+ Upload'}
        </Upload>
      </ImgCrop>
    </div>
  )
})

アップロードコンポーネントを使用する<ImgCroprotate>コンポーネントと、使用される関連プロパティの関数を使用します。
アクション：アップロードアドレス
listType：アップロードリストの組み込みスタイル、3つの基本スタイルのテキスト、画像、および画像カード
fileListをサポートします。 ：アップロード済みファイルのリスト（制御）
onChange：この関数は、アップロード、完了、および失敗時に呼び出されます。
onPreview：ファイルリンクまたはプレビューアイコンがクリックされたときのコールバック

画像のアップロードにはさらに多くの属性があります。公式ドキュメント
を参照して効果を確認できます。

Antdには、非常に便利な関連関数がたくさん用意されています。自分で試すことができます。その他のプロパティについては、公式ドキュメントを参照してください。このような関数の実装は比較的簡単です。アップロードなどの操作も実行できます。あなた自身の必要に応じてファイル。