preview

アイコンをクリックすると、input(type=file)の役割の代わりになります.画像プレビューがアクティブな場合は、アイコンではなく3つの連想を追加します.

トップページ

画像ファイルをクリックすると

//먼저 훅을 사용하여 Image ele의 src의 상태를 변경시켜준다.
const [fileUrl, setFileUrl] = useState(null);
	//인풋이 onChange 될 때
const chgPreview = (e) => {
  //현재 이미지 파일
   const imageFile = e.target.files[0];
  //선택한 이미지 파일의 url
   const imageUrl = URL.createObjectURL(imageFile);
  //Image ele의 src를 해당 이미지 url로 변경시켜준다.
   setFileUrl(imageUrl)
 }
 ...
 //인풋 파일에 id값을 주고 라벨에서 for='id값'을 해주면 라벨이 해당 인풋파일을 대신 할 수 있다.
 <label for="imgFile">
   //미리보기가 활성화 될 경우 아이콘을 가리고 이미지를 띄워주기 위해 삼항연산자를 사용하였다.
    {!fileUrl ?
    <Grid bg={'#eee'} width="374px" height="236px" margin="23px auto" border_radius="44px" padding="15% 30%">
    <BiCamera size="118px" color={'white'}/>
    </Grid> :
      <Image src={fileUrl} width="374px" height="236px" margin="3% auto"/>
    }
 </label>
 //라벨이 인풋파일을 대신하고 있으므로 해당 인풋파일은 숨김처리 된 상태이다.
 <FileBox type="file" accept="image/*" ref={fileUpload} onChange={chgPreview} id="imgFile"/>

画像をs 3にアップロード

1.s 3でのパケットの作成

で欲しい名前のbucketを作ります.
(s 3にイメージをアップロードするため、パブリックアクセスのブロックをすべて解除する必要があります!)

2.パケットの設定

パケットポリシー

パケットが生成されたら、[権限]タブでポリシーを編集します.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": "내 버킷 arn으로 수정/*"
        }
    ]
}

CORS

☝🏻 CORS?

クロスソースリソース共有

構造

は、ユーザが初期リソースが存在するドメイン以外の他のドメインからウェブページ上の限られたリソースを要求することを可能にする.

bucketでCORSを編集していない場合、アップロードに接続すると、私のドメインはs 3にアクセスするため、CORSによってブロックされたことを示すエラーが発生する可能性があります.
CORSはもともとXMLファイルだったのですが、後にJSON形式になってしまい、それなりの部分を見つけるのに時間がかかりました.

[
    {
    //*로 할 경우 모든 도메인 허용
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

クライアントコード

☝🏻 s 3にファイルのアップロードを支援するパッケージをインストールする必要があります.

取付

yarn add react-aws-s3

インポートポート

import S3upload from 'react-aws-s3';

btn

をアップロード

const submitBtn = (e) => {
    e.preventDefault();
    let file = fileUpload.current.files[0];
    let newFileName = fileUpload.current.files[0].name;
  //여기 진짜 주의!!!!!!!!!
    const config = {
      bucketName: process.env.REACT_APP_BUCKET_NAME,
      region: process.env.REACT_APP_REGION,
      accessKeyId: process.env.REACT_APP_ACCESS_ID,
      secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
    };
    const ReactS3Client = new S3upload(config);
    ReactS3Client.uploadFile(file, newFileName).then(data => {
      if(data.status === 204) {
        let imgUrl = data.location
        dispatch(addRecordDB(recordDate, imgUrl))
      } else {
        window.alert('사진 업로드에 오류가 있어요! 관리자에게 문의해주세요.')
      }
    });
  }

🚨 上の関数configにはawsのaccesskeyとセキュリティキーが含まれています.
(このセクションはawsで作成する必要があります!!)
ここで注意しなければならないのは、このセキュリティキーが絶対に露出してはいけないのは初めてです.envファイルを作成して適用すると、常にエラーが発生するため、対応する鍵を直接書いてテストします.そしてもう一回envファイルを適用するのを忘れていたので、何も考えずにバニラでPushを押した瞬間だったなぁ…!!!その瞬間からawsは自分の身長がディーンに露出しているというメールを受け取ったので、私は怖くなった...
幸いにもアップロードすると、私も気づいて、すぐにドアの鍵を逆さまにして、万が一に備えて、相応の警備鍵も削除しました.
複数のブログを見ていて、発見が遅れたり知らなかったりすると、ハッカーたちが有名なグルメ店だと言っていて、とても素敵な貸し出しが見られるので注意が必要です…!