image

node.jsのAPIで画像を受け取る方法 | fetch , React - ハイテク好きが楽しめるWebサイト off.tokyo

やったこと

フロント側を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]
}

node.jsのAPIで画像を受け取る方法 | fetch , React - ハイテク好きが楽しめるWebサイト off.tokyo