magazine off

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

投稿日 : 2021年6月1日(火曜日)

やったこと

 

フロント側を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やったことフロント側をReactで作ってて、JavaScri....
node.jsのAPIで画像を受け取る方法 | fetch , React|MENTA「教えたい人」と「学び... - menta.work
How to receive images with the node.js API | fetch , React - off.tokyo, the web site for high-tech en...
How to receive images with the node.js API | fetch , React - DEV Community
How to receive images with the node.js API | fetch , React — off.tokyo, the web site for high-tech enthusiasts
How to receive images with the node.js API | fetch , React - Medium

Categories

Recent Posts

rails c をシンプルにする方法

 環境 ruby '2.5.3' rails '5.2.2' 実装 rai…

投稿日 : 2019年3月17日(日曜日)

pythonで拡張子に「○○」という文字列が含まれているファイルのリストを再帰的に取得

  pythonで、あるディレクトリの下にある、指定したディレクトリの中にあ…

投稿日 : 2018年5月15日(火曜日)

TypeScriptのType GuardsとType Predicatesをそれぞれ適切に使う方法

    TypescriptのType Predicatesを理解し…

投稿日 : 2021年4月21日(水曜日)

やっと起業しようと思う

    昔、高校生のときにバイトで働いていたスーパーの店長が…

投稿日 : 2018年5月30日(水曜日)