ReactJS图像上载不工作

我正在尝试使用中给出的代码示例上载图像

我将文件内容放在状态变量中，并通过下面提到的提交函数在控制台中获取它

_handleSubmit(e) {
   e.preventDefault();
   console.log(this.state.file)
   payLoad = {
                image: this.state.file,
            }
   axios({
              method: 'post',
              url: this.state.url+'/task',
              data: payLoad,
              headers: {
                    'content-type': 'multipart/form-data'
                }
            })
 }

此.state.file

的控制台结果为

File(128544)
lastModified:1508143324556
lastModifiedDate:Mon Oct 16 2017 14:12:04 GMT+0530 (India Standard Time) {}
name:"sample.png"
size:128544
type:"image/png"
webkitRelativePath:""
__proto__:File

但是网络在API请求头中将图像变量显示为

{}

，并且图像没有上传。有人能帮忙吗？由于我是ReactJS新手，我在一些功能方面遇到了麻烦，不得不在这里问很多问题。

您需要使用，因为您发送的文件的内容类型为

content\u type=“multipart/form data”

试试这个：

_handleSubmit(e) {
    e.preventDefault();
    console.log(this.state.file)

    let data = new FormData();
    data.append('image', this.state.file);

    axios({
        method: 'post',
        url: this.state.url+'/task',
        data,
        headers: {
            'content-type': 'multipart/form-data'
        }
    })
}

要检查FormData值，可以使用或迭代方法

检查此代码段：

let data=new FormData（）；
数据。附加（'a'，1）；
数据。附加（'b'，2）；
数据。附加（'c'，3）；
数据。附加（'d'，4）；
//使用formdata.get（key）方法
console.log（'a='，data.get（'a'）；
//迭代值
for（让el为data.values（））{
log（'el='，el）；
}

因此，如果需要添加更多变量，是否应将所有值作为

data.append（'id'，this.state.id'）追加

像这样？是的，您可以附加任意多的值，formdata需要发送文件，否则您可以发送普通对象：）但在我的后端PHP代码中，$\u文件提供空数组不确定PHP，检查此答案可能会解决您的问题：是的，这是我正在遵循的方法，我应该得到它。但不幸的是，不是