无法在反应中使用多部分上传图像答案

【问题标题】：Image can't be uploaded using multipart in react无法在反应中使用多部分上传图像
【发布时间】：2020-06-02 07:37:51
【问题描述】：

我正在尝试使用 multipart 将图像上传到数据库中。但我从 API 得到一个错误“文件无法上传”。我在邮递员中检查了 API。它在那里工作正常。所以我的代码一定有问题。我找不到任何错误。什么是我做错了吗？

代码

import React from 'react';
import axios from 'axios';

const URL="https://api.hello.com/admin/fetch_image_settings";

const POST_URL="https://api.hello.com/admin/save_image_settings";

const header = {
    "content-type": "multipart/form-data"
}



class ImageSetting extends React.Component{
    constructor(props)
    {
        super(props);
        this.state={
            logo_image:null,
            app_icon:null,
            favicon:null,
            admin_id:localStorage.getItem("admin_id"),
            website:null

    }
    }
    handleFile=(event)=>
    {
        let file=event.target.files[0];
        console.log(file);
        this.setState({[event.target.name]:event.target.files[0]});
    }
    handleInput=(event)=>
    {
        this.setState({[event.target.name]:event.target.value})
    }
    handleSubmit=(event)=>
    {
        event.preventDefault();
        const { logo_image, app_icon,favicon, website, admin_id}=this.state;
        let data=new FormData();
        data.append("logo_image",logo_image);
        data.append("app_icon",app_icon);
        data.append("favicon",favicon);

        axios.post(POST_URL,{data},{
            params:{
                admin_id, website
            },
            headers:header
        })
        .then((res)=>
        {
            console.log(res);
        })
        .catch((err)=>
        {
            console.log(err);
        })

    }
    componentDidMount()
    {
        const { admin_id}=this.state;
        axios.get(URL,{
            params:{
                admin_id
            }
        })
        .then((res)=>{
            console.log(res.data)
        })
        .catch((err)=>
        {
            console.log(err);
        })
    }
    render()
    {
        return(
            <React.Fragment>
            <h1>Image setting</h1>
            <form name="image-setting" onSubmit={this.handleSubmit}>
                <input type="text" value={this.state.website} onChange={this.handleInput} name="website" placeholder="Website" />
                <input type="file" onChange={this.handleFile} name="logo_image" />
                <input type="file" onChange={this.handleFile} name="app_icon" />
                <input type="file"  onChange={this.handleFile} name="favicon" />
            </form>
            </React.Fragment>
        )
    }
}
export default ImageSetting;

【问题讨论】：

你试过调试 api 吗？你说错误来自api。
API 在邮递员中工作得非常好。我收到状态码 200，然后出现错误消息“无法上传文件”。这表明 API 工作正常。
状态为200，如何返回错误？ .可以调试 api 吗？
附上来自api的错误信息截图
您应该在您的 Web 开发工具中看到 POST 正文。 Postman POST 和axios POST 之间一定有区别。也许可以试试axios.post(POST_URL, data, {，不要在数据周围戴上手镯。

标签： reactjs typescript axios

【解决方案1】：

问题必须是字母大小写。它应该看起来像 Content-Type MDN。

一个对象可以包含同名但大小写不同的属性。

const header = {
    "content-type": "multipart/form-data",
    "Content-Type": "multipart/form-data"
}

console.log(header)

【讨论】：