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为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()方法。

检查此代码段：

＆＃13;

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);
}

＆＃13;

ReactJS图片上传无效

1 个答案: