后台表单数据为空答案

【问题标题】：Formdata is blank at the backend后台表单数据为空
【发布时间】：2019-05-01 05:57:56
【问题描述】：

我通过在 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
  })
}

【问题讨论】：

你的this.props.uploadImage是什么样的？
@Tholle 抱歉回复晚了。我已经更新了我的答案。

标签： javascript reactjs file-upload multipartform-data form-data

【解决方案1】：

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

This is normal.

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

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

你的缺少它。更重要的是，你无法知道它会是什么。

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

【讨论】：

这行得通。非常感谢！！！但是你的解释超出了我的水平:-(

【解决方案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 中包含其数据的字段的名称。

value
字段的值。这可以是 USVString 或 Blob（包括文件等子类）。

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

-- MDN - FormData.append()

【讨论】：