JavaScript Node.js React

node.jsのAPIで画像を受け取る方法 | fetch , React

やったこと

 

フロント側をReactで作ってて、JavaScriptの fetchを使ってフォームデータをpostでapiに飛ばします。

 

それで、apiでフォームデータを受け取ってデータをサーバーに保存なりします。

 

ユーザー情報を編集するために、名前と、免許証(裏と表)をサービスに登録するシーンを思い浮かべてコードを見てみてください。

 

node.jsのサーバー側のログ

 

下記のログで、フロント側で作ったフォームデータを、postで受け取って、リクエストに入ってるデータを取得します。

 

リクエストのボディで最初、画像を取れなかったので、色々とリクエストのログを見てみると、filesに画像データが入ってました。

 


console.log("use_info")
console.log(JSON.parse(req.body.use_info))

console.log("img_head")
console.log(req.files.img_head)

console.log("img_backkうううううう")
console.log(req.files.img_back)

 

フロント側の実装 fetch

フロント側で、ユーザーの名前と画像をapiにpostするコードです。

FormDateを使って、その中にappendしていく方法で、ユーザーデータと、画像データを追加しています。


var userData = new FormData()
userData.append('use_info', JSON.stringify(Formdata))
userData.append('img_head', Formdata.fileBack["0"])
userData.append('img_back', Formdata.fileBack["0"])

fetch(`${API_URL}/edit_connect_user`, {
method: 'POST',
body: userData
})

 

サーバー側のログ

以下のコードは、フロント側からpostで投げられてきたフォームデータのログです。

 

こういう感じで、ユーザーの名前と、画像データが入ってると思います。


use_info
{
firstName: '太郎',
lastName: '鈴木',
userid: 'fekw020'
}
img_head
{
name: 'img_head.png',
data: ,
size: 9808,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'c28358700f3c94f841c7f7fad50596da',
mv: [Function: mv]
}
img_backk
{
name: 'img_backk.png',
data: ,
size: 9808,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'c28358700f3c94f841c7f7fad50596da',
mv: [Function: mv]
}

 

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-JavaScript, Node.js, React

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.