MERNスタックWebアプリケーションに画像を保存するための最良の方法

オプションは、画像をCloudinary にアップロードすることです。 クライアント側で、返されたURLを独自のAPIを使用してMongoDBに保存します。 Cloudinaryは、画像をホストするだけでなく、画像の操作や最適化なども処理します。

基本的にあなたがしなければならないことは：

1. Cloudinaryアカウントにサインアップ
2. [設定]->[アップロード]に移動します
3. 「署名なしモード」で「アップロードプリセット」を追加して、Cloudinaryへの署名なしアップロードを有効にします

その場合、アップロード機能は次のようになります。

async function uploadImage(file) { // file from <input type="file"> 
  const data = new FormData();
  data.append("file", file);
  data.append("upload_preset", NAME_OF_UPLOAD_PRESET);

  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${YOUR_ID}/image/upload`,
    {
      method: "POST",
      body: data,
    }
  );
  const img = await res.json();
  // Post `img.secure_url` to your server and save to MongoDB
}