后台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-Typeheader，允许fetch从FormData[=28]生成它=].完全删除我引用的代码。

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为空

Formdata is blank at the backend

javascript

file-upload

multipartform-data

form-data

reactjs