ファイルのアップロード

imgbb APIによるイメージのアップロード

イメージアップロードの実装
イメージアップグレードの実装中、FormDataというファイル転送オブジェクトに初めて接触しました.
FormDataには、オブジェクト形式のキー値と値があります.
ただコンソールで撮影した時にはFormData()という形で出てきます.

for (let value of formData.values()) {
  console.log(value);

このように確認すべきです.

const formData: any = new FormData(); //파일을 전달할때는 formData를 써야함
    formData.set("key", "97752c84b8e085bd2b5d5a78368f1cd0"); // imgbb에 key값과 파일을 필수적으로 보내줘야함
      formData.append("image",event.target.files[0]);
    }

imgbbのドキュメントによれば、APIキー値とファイルが本体に渡される必要があるため、上記のコードが記述されている.
その後imgbbにpost要求を発行し、画像のurl値を取得するためにpost要求を記述する.この場合、画像ファイルを送信するには、タイトルに「Content-Type」:「multipart/form-data」と書く必要があります.

axios
       .post("https://api.imgbb.com/1/upload", formData, {
         headers: {
           "Content-Type": "multipart/form-data",
         },
       })
       .then((res) => console.log(img.concat(res.data.data.url)));
 };

ファイルをアップロードするときに解決しました...問題は、複数のファイルをアップロードしたいときにうろうろしていることです.
複数のイメージアップロードの実装

const formData: any = new FormData(); //파일을 전달할때는 formData를 써야함
    formData.set("key", "97752c84b8e085bd2b5d5a78368f1cd0"); // imgbb에 key값과 파일을 필수적으로 보내줘야함
    for (let i = 0; i < event.target.files.length; i++) {
      formData.append("image", event.target.files[i]);
    }

このようにformDataがvalue値を確認した場合、POST要求が発行され、明確に選択されたすべてのファイルが表示されると、最後のファイルのみが応答として確認される.

axios
        .post("https://api.imgbb.com/1/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => console.log(img.concat(res.data.data.url)));
  };

コンソールにFormDataの値を書き込みます.

File {name: '스크린샷_2022-03-16_오전_10.41.39-removebg-preview.png', lastModified: 1647394929973, lastModifiedDate: Wed Mar 16 2022 10:42:09 GMT+0900 (한국 표준시), webkitRelativePath: '', size: 39287, …}
File {name: '스크린샷_2022-03-16_오전_11.34.43-removebg-preview.png', lastModified: 1647398092454, lastModifiedDate: Wed Mar 16 2022 11:34:52 GMT+0900 (한국 표준시), webkitRelativePath: '', size: 104790, …}

これで選択したすべてのファイルが表示されます.
POST要求後に受信した応答を確認することにより、1つのファイルに対応するデータのみが受信されたと判断することができる.

['https://i.ibb.co/X4BxcGQ/2022-03-16-10-55-51-removebg-preview.png']

だから今から原因を探し出そうとしても迷っている.