/

如何使用Fetch上傳文件

如何使用Fetch上傳文件

以簡單易懂的方式解釋如何使用Fetch API將文件上傳到服務器上。

有一個看似簡單的任務有時會讓人花上幾個小時在網上進行研究:將文件上傳到服務器。

在這篇教程中,我將向您解釋如何使用fetch來實現這樣的功能。

給定一個包含文件輸入字段的表單:

1
<input type="file" id="fileUpload" />

我們在其上附加一個change事件處理程序:

1
2
3
document.querySelector('#fileUpload').addEventListener('change', event => {
handleImageUpload(event)
})

然後我們在handleImageUpload()函數中處理大部分的邏輯:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const handleImageUpload = event => {
const files = event.target.files
const formData = new FormData()
formData.append('myFile', files[0])

fetch('/saveImage', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error => {
console.error(error)
})
}

在這個例子中,我們向/saveImage端點發送POST請求。

我們初始化一個名為formData的新的FormData對象,並將上傳的文件附加到其中。如果我們有多個文件輸入元素,將會有多個append()調用。

第二個then()中的data變量將包含JSON解析後的返回數據。我假設你的服務器會以JSON格式作為響應返回。

參考 如何在服務器端處理上傳的圖片

tags: [“fetch API”, “file upload”, “FormData”]