如何使用Fetch上傳文件
以簡單易懂的方式解釋如何使用Fetch API將文件上傳到服務器上。
有一個看似簡單的任務有時會讓人花上幾個小時在網上進行研究:將文件上傳到服務器。
在這篇教程中,我將向您解釋如何使用fetch
來實現這樣的功能。
給定一個包含文件輸入字段的表單:
1 | <input type="file" id="fileUpload" /> |
我們在其上附加一個change
事件處理程序:
1 | document.querySelector('#fileUpload').addEventListener('change', event => { |
然後我們在handleImageUpload()
函數中處理大部分的邏輯:
1 | const handleImageUpload = event => { |
在這個例子中,我們向/saveImage
端點發送POST請求。
我們初始化一個名為formData
的新的FormData
對象,並將上傳的文件附加到其中。如果我們有多個文件輸入元素,將會有多個append()
調用。
第二個then()
中的data
變量將包含JSON解析後的返回數據。我假設你的服務器會以JSON格式作為響應返回。
tags: [“fetch API”, “file upload”, “FormData”]