それは私のためにAWS

こんにちは友人!今日はJavaScriptを使ってAWS S 3に画像をアップロードする方法を紹介します.
掘りましょう!

コアコンセプト
AWS S 3のコアコンセプトについてお酒を飲み、一目見てみましょう.できるだけ簡単にしてみます.
ここで我々は行きます:

バケット
バケットは、我々がアップロードしたいオブジェクトが含まれており、それはユニークなグローバルです.

オブジェクト
オブジェクトは、イメージ、フォントファイル、またはバケツにアップロードしたいファイルです.オブジェクトには一意のキーがあり、メタデータの型、ファイルの種類などのメタデータがあります.

コア
デフォルトでは、AWS S 3はパブリックアクセスをブロックし、オブジェクトはプライベートになります.それで、我々はそれを公にするために我々の目的のためにCorsをセットアップする必要があります.

フロー
私の目標は、ユーザーが私が定義したバケツにオブジェクトをアップロードできるようにすることです.AWS S 3では、ユーザがこれを行うのを許容するために、presigned URLを使用できます.
まず、バケットの名前、AWSアクセスキー、秘密キーを使用して署名URLを取得します.第二に、私たちは署名されたURLを使用して、ユーザーがリクエストを我々のバケツに要求できるようにします.
流れは、ここにあります:

コーディング

セットアップ
NextJSアプリをすばやく作成しましょう.

npx create-next-app@latest --typescript

次に、AWS S 3にバケットを追加します.
私はputObjectを呼び出します.

AWSアクセスキーとAWS秘密キーを作成する必要があります.

コードを書く
私はAWS S 3に接続するためにdeleteObjectをインストールします.
まず最初に、署名されたURLを作成するAPI nextjsを作成する必要があります.これは、ユーザーのリクエストからオブジェクトのキー、filetypeを受け取ります.

import type {NextApiRequest, NextApiResponse} from 'next'
import {responseError} from '@/utils/api-stuff'
import aws from 'aws-sdk'

// you need to set up these values in .env file

const s3 = new aws.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY,
})

function responseError(res: NextApiResponse, message: string) {
  return res.status(404).json({message})
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {key, fileType} = req.query

  if (!key) {
    return responseError(res, 'Key of object is required!')
  }

  if (!fileType) {
    return responseError(res, 'MetaData of object is required!')
  }

  const bucketParams = {
    Bucket: process.env.BUCKET_NAME,
    Key: key,
    ContentType: fileType,
  }

  try {
    const signedUrl = await s3.getSignedUrl('putObject', bucketParams)

    res.status(200).json({url: signedUrl})
  } catch (error) {
    res.status(401).json({message: (error as Error).message})
  }
}

署名付きURLを受信するリクエストを行い、値に保存します.

const signedUrlRef = React.useRef<string | null>(null)

React.useEffect(() => {
  const query = new URLSearchParams({
    // name of object
    key: 'naruto',
    fileType: 'image/jpeg',
  })

  async function getSignedUrls() {
    try {
      const {url} = await fetcher(`/api/your-bucket?${query}`)
      if (!signedUrlRef.current) {
        signedUrlRef.current = url
      }
    } catch (error) {
      console.log('GetSignedUrls._error:', error)
    }
  }

  getSignedUrls()
}, [])

フォーム要素を追加し、画像を送信します.

async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()
  if (!signedUrlRef.current) return

  const {myFile} = event.currentTarget
  const file = myFile.files[0]

  try {
    await fetch(signedUrlRef.current, {
      method: 'PUT',
      headers: {
        'Content-Type': file.type,
      },
      body: file,
    })
  } catch (error) {
    console.log('pushObjectToBucket._error:', error)
  }
}
return (
  <div>
    <form onSubmit={handleFormSubmit}>
      <input type="file" name="myFile" />
      <button>Submit</button>
    </form>
  </div>
)

これはすべてのコードです.

import * as React from 'react'

const fetcher = (args: string) => fetch(args).then((res) => res.json())

function Demo() {
  const signedUrlRef = React.useRef<string | null>(null)

  React.useEffect(() => {
    const query = new URLSearchParams({
      // name of object
      key: 'naruto',
      fileType: 'image/jpeg',
    })

    async function getSignedUrls() {
      try {
        const {url} = await fetcher(`/api/your-bucket?${query}`)
        if (!signedUrlRef.current) {
          signedUrlRef.current = url
        }
      } catch (error) {
        console.log('GetSignedUrls._error:', error)
      }
    }

    getSignedUrls()
  }, [])

  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    if (!signedUrlRef.current) return

    const {myFile} = event.currentTarget
    const file = myFile.files[0]

    try {
      await fetch(signedUrlRef.current, {
        method: 'PUT',
        headers: {
          'Content-Type': file.type,
        },
        body: file,
      })
    } catch (error) {
      console.log('pushObjectToBucket._error:', error)
    }
  }
  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input type="file" name="myFile" />
        <button>Submit</button>
      </form>
    </div>
  )
}

export default Demo

今すぐ提出ボタンを押すと我々のバケツをチェックしましょう


結論
ここに私はNextJSフレームワークを使用してAWS S 3に画像をアップロードする方法です.なぜあなたのイメージやあなたがバケットに追加したいファイルをアップロードしようとしないでください.