前端傳送資料給後端,除了 JSON 格式外,另外一種常見的就是 Form Data。不過 Form Data 預設的 key value 格式,後者的 value 只能是字串型式。若你想要傳送 array 的資料,那麼會需要一點加工並根據後端語言的實作來調整。
程式碼
將物件轉換成 FormData,可以寫一個轉換的 function 來達成,以下為 Demo:
說明
根據後端實作的不同,可能出現的組合如下:( 若 key 為 tags;value 為 [ ‘tag1’, ‘tag2’, ‘tag3’ ] )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const form = new FormData() // Option 1 form('tags', JSON.stringify(tags)) // Option2 form('tags[0]', 'tag1') form('tags[1]', 'tag2') form('tags[2]', 'tag3') // Option3 form('tags[]', 'tag1') form('tags[]', 'tag2') form('tags[]', 'tag3') // Option4 form('tags', 'tag1') form('tags', 'tag2') form('tags', 'tag3') |
參考資料
1. How to pass array to formdata and save as array in react.js
2. JS, how to append array in FormData?