使用Fetch上传文件

本文内容：使用Fetch API上传文件到服务器，帮助新手朋友对Fetch 上传文件有一个整体的认识。

俺将解释如何使用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()调用。

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

使用Fetch上传文件

发表回复