我有一個表單，該表單接受一個文件和一些字段，我希望通過 Fetch API 將這些數據發送到服務器，就像這樣（React 代碼）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <form
encType='multipart/form-data'
action='/api/post'
method='POST'
onSubmit={async (e) => {
e.preventDefault()
if (!title) {
alert('請輸入標題')
return
}
if (!content && !image) {
alert('請在帖子中輸入一些文本')
return
}
const body = new FormData()
body.append('image', image)
body.append('title', title)
body.append('content', content)
const res = await fetch('/api/post', {
body,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
})
}}
>
...
</form>
|
我遇到了一個問題，文件數據實際上沒有被發送到服務器。
解決方案是這樣的：不能設置標頭。
我確實設置了 multipart/form-data 標頭，因為這是用於文件上傳的，但顯然這正是破壞了通過 fetch 上傳文件的原因。
從 fetch 請求中刪除標頭，然後事情應該能正常運作。
tags: [“fetch”, “multipart/form-data”]