POST Ant Design 使用 axios 将文件上传到 django ImageField答案

【问题标题】：POST Ant Design Upload file with axios to django ImageFieldPOST Ant Design 使用 axios 将文件上传到 django ImageField
【发布时间】：2020-12-10 23:51:19
【问题描述】：

如何将 Ant Design Upload 文件发送到我的 Django 后端模型 ImageField。我正在使用 axios 使用 PUT 方法作为更新用户配置文件。目前我将图像设置为状态并访问文件对象以将其发送到我的后端。但是，这会引发 404 错误。我应该在发布之前以某种方式更改我的文件数据还是这里可能出现什么问题？

我发布的文件：

state = {
    file: null,
};
    
handleImageChange(file) {
        this.setState({
          file: file
        })
        console.log(file)
    };

handleFormSubmit = (event) => {
        const name = event.target.elements.name.value;
        const email = event.target.elements.email.value;
        const location = event.target.elements.location.value;
        const image = this.state.file;
        const sport = this.state.sport;
        axios.defaults.headers = {
            "Content-Type": "application/json",
            Authorization: this.props.token
        }
        const profileID = this.props.token
        axios.patch(`http://127.0.0.1:8000/api/profile/${profileID}/update`, {
            name: name,
            email: email,
            location: location,
            sport: sport,
            image: image,
            })
            .then(res => console.log(res))
            .catch(error => console.err(error));
        }

当我 console.log(file) 时，我可以正确看到我上传的文件，但我认为发送它会导致错误

【问题讨论】：

需要urls.py！
网址正确
for update-path('profile//update', ProfileViewUpdate.as_view(), name='profile-update'),
我需要完整的 urls.py。我读到：你的 url 是 /api/profile/ 而在 urls.py 中只是 'profile/' 是正常的吗？
网址正确。

标签： django reactjs post axios antd

【解决方案1】：

尝试将“Content-Type”更改为"Content-Type" : "multipart/form-data"

【讨论】：