如何使用Fetch上傳文件
以簡單易懂的方式解釋如何使用Fetch API將文件上傳到服務器上。 有一個看似簡單的任務有時會讓人花上幾個小時在網上進行研究：將文件上傳到服務器。 在這篇教程中，我將向您解釋如何使用fetch來實現這樣的功能。 給定一個包含文件輸入字段的表單： <input type="file" id="fileUpload" /> 我們在其上附加一個change事件處理程序： document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 然後我們在handleImageUpload()函數中處理大部分的邏輯： 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格式作為響應返回。 參考 如何在服務器端處理上傳的圖片