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: {} }

那我该如何传递表单数据并上传图像

编辑：上传图像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

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

This is normal.

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

多部分表单数据MIME类型需要有一个参数来描述边界标记（这样解析器就知道一个字段在哪里结束，下一个字段在哪里开始）。

您错过了它。而且，您无法知道它将是什么。

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

Answer 2

为什么要使用FileReader，将其作为base64上传并分别附加文件名？

你可以做

handleUserImage (evt) {
  const file = evt.target.files[0]
  if (file) {
    const formdata = new FormData()
    formdata.append('photos', file)
    this.props.uploadImage({ image: formdata })
  }
}

您节省了一些字节，
避免不必要的解码和编码计算
运行速度更快
节省〜3倍带宽

FormData.append（名称，值，文件名）

名称
数据包含在value中的字段的名称。

值
字段的值。这可以是USVString或Blob（包括子类，例如File）。

文件名可选
当将Blob或File作为第二个参数传递时，报告给服务器的文件名（USVString）。 Blob对象的默认文件名是“ blob”。 File对象的默认文件名是文件的文件名。

-MDN - FormData.append()

后端的Formdata为空白

2 个答案: