使用Fetch上传文件

本文内容：使用Fetch API上传文件到服务器，帮助新手和朋友对Fetch上传文件有一个大概的了解。

我会解释一下如何使用fetch来实现这个功能。

假设您有一个带有文件数据字段的表单：

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

收听更改事件：

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()调用。

第二个 then() 中的 data 变量将包含解析后的 JSON 返回数据。