如何使用提取上傳文件

如何使用Fetch API將文件上傳到服務器,方法很簡單

有一項任務應該很簡單,但有時會導致在Web上進行大量研究:將文件上傳到服務器。

在本教程中,我將向您說明如何使用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端點。

我們初始化一個新的FormData對象,我們將其分配給formData變量,然後將上傳的文件添加到此處。如果我們有多個文件輸入元素,那麼我們將有多個append()稱呼。

data第二個內部變量then()將包含JSON解析的返回數據。我假設您的服務器將給您JSON作為響應。

如何處理在服務器端上傳的圖像是另一個主題,我明天將寫一個主題。

免費下載我的JavaScript初學者手冊


更多js教程: