在 Android 上使用 Fetch/Axios 将图像作为 FormData 发布中断

时间:2021-08-02 00:52:44

标签: javascript android node.js reactjs fetch

我在 React 中组合了一个图像上传事件,允许我单击输入并上传图像。很简单的东西。

图像被附加到 FormData 并被发布到我的服务器。 在桌面上一切正常。

尝试在 Android 上使用此设置失败。我假设 iOS 也会失败,但我没有可以测试的。

代码在这里:

addFile(event) {

  let ext = event.target.files[0].type
  const approvedext = ["image/jpg", "image/jpeg"]

  if (approvedext.includes(ext) === false) {
    toast.error(`File type not supported`)
  } else {

let image = event.target.files[0]

let formData = new FormData();    
formData.append('image', image)

if (image !== undefined && image !== null) {

  fetch(`mywebsite.com/api/post/:unique`, {
  method: 'POST',
  body: formData,
  headers: {
    'Authorization': `Bearer token`,
  }
  })
  .then((response) => response.json())
  .then((data) => { 
    if (data.error !== undefined) {
      console.log(data.error)
      toast.error(`data.error`)
    } else {
      this.setState({
        image: data.image,
        imageHash: Date.now()
      })
      toast.success('Image Updated!')
      return
    }
    })
    .catch(error => {
      toast.error('Network Failure')
    });
  } else {
    return
  }}
}

在接收端,我有一个快速服务器,使用 Multer 调整图像大小并将图像上传到 S3。

很简单的东西。

在 Windows/桌面上一切都很好。 Android 只是告诉我“TypeError: Failed to fetch”。

请有人检查一下并告诉我我遗漏了一些简单的东西。

谢谢!

0 个答案:

没有答案