ReactJS图像上传不起作用

Question

我正在尝试使用Codepen 中给出的代码示例上传图片

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

_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'
                }
            })
 }

this.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 的新手，所以我在某些功能上确实遇到了麻烦，因此不得不在这里提出很多问题。

Answer 1

您需要使用FormData，因为您发送的文件内容类型为content_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 值，您可以使用 FormData.get(key) 或迭代 FormData.values() 方法。

检查这个sn-p：

let data = new FormData();
data.append('a', 1);
data.append('b', 2);
data.append('c', 3);
data.append('d', 4);

// using formdata.get(key) method
console.log('a = ', data.get('a'));

// iterating over values
for(let el of data.values()){
   console.log('el = ', el);
}