1. 犀牛前端部落首页
  2. JavaScript百科

使用Fetch上传文件

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

使用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返回数据。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3294.html

发表评论

登录后才能评论