javascript - 后台Formdata为空

Question

我通过在reactjs中附加formdata来传递图像数据

这是这个的处理程序

handleUserImage(e) {
    const input = e.target
    if (input.files && input.files[0]) {
      const reader = new FileReader()
      reader.onload = (r) => {
        const formdata = new FormData()
        formdata.append('photos', input.files[0])
        formdata.append('fileName', input.files[0].name)
        this.props.uploadImage({ image: formdata })
      }
      reader.readAsDataURL(input.files[0])
    }
  }

当我将它控制台到后端时，它看起来像空白对象

{ image: {} } 

那我如何传递formdata并上传图片

编辑:上传图片API调用

export const uploadImage = (data) => {
  console.log(data)
  return fetch(`http://hostName:3001/town/image`, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    body: data
  })
  .then((res) => {
    return res.json()
  })
  .then((payload) => {
    console.log(payload)
    return payload
  }).catch((error) => {
   throw error
  })
}

Answer 1

when I console it to backend it looks like blank object

This is normal.

 headers: {
       'Content-Type': 'multipart/form-data'
 },

多部分表单数据 MIME 类型需要有一个参数来描述边界标记(以便解析器知道一个字段在哪里结束以及下一个字段在哪里开始)。

你的不见了。更重要的是，你无法知道它会是什么。

不要覆盖 Content-Type header ，允许 fetch 从 FormData 对象生成它。完全删除我引用的代码。