从React Form到Django ImageField的图像上传错误

如何解决从React Form到Django ImageField的图像上传错误

我想在我的Django模型中更新ImageField，并且我正在使用axios PATCH方法。图片来自我的Ant设计表单，我将其保存为我的状态。为什么我不能像这样更新我的图像文件？在将图像文件发送到后端之前，是否应该对图像文件进行不同的格式化？发生的错误是400错误的请求。

我的个人资料更新表格：

import React from "react";
import { Form,Input,Button,Select,message,Upload } from "antd";
import {connect} from 'react-redux';
import { UploadOutlined } from '@ant-design/icons';

import axios from "axios";

const FormItem = Form.Item;

const { Option } = Select;

const success = () => {
  message.success('Teie profiil on salvestatud edukalt,võite lehte uuendada');
};

class ProfileForm extends React.Component {
    state = {
        file: null,};

    dummyRequest({ file,onSuccess }) {
         onSuccess("ok");
    }

    constructor(props) {
        super(props)
        this.state = {sport: this.props.profile.sport};
        this.handleChange = this.handleChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleImageChange(file) {
        this.setState({
          file: file
        })
        console.log(file)
    };

    handleChange(name,value) {
        this.setState({
          [name]: value
        });
    }

    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.name;
        console.log(image);
        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));
        }

    render() {
        const props2 = {
            name: 'file',accept: 'image/*',action: null,multiple: false,};

        return (
          <div>
            <Form onSubmitCapture={(event) => this.handleFormSubmit(event)}>
              <FormItem label="Nimi" rules={[{ required: true,message: 'Palun sisestage nimi' }]}>
                <Input name="name" placeholder="..." defaultValue={this.props.profile.name}/>
              </FormItem>
              <FormItem label="Teie spordiala" rules={[{ required: true,message: 'Palun valige spordiala' }]}>
                <Select name="sport" value={this.state.sport} style={{ width: 120 }} onChange={value => this.handleChange("sport",value)} defaultValue={this.props.profile.sport}>
                    <Option value="jooks" >Jooks</Option>
                    <Option value="jõud" >Jõud</Option>
                    <Option value="crossfit" >Crossfit</Option>
                    <Option value="kardio" >Kardio</Option>
                </Select>
              </FormItem>
              <FormItem label="Email" rules={[{ required: true,message: 'Palun sisestage email',type: 'email' }]}>
                <Input name="email" placeholder="..." defaultValue={this.props.profile.email}/>
              </FormItem>
              <FormItem label="Teie elukoht (linn / asula)" rules={[{ required: true,message: 'Palun sisestage elukoht' }]}>
                <Input name="location" placeholder="..." defaultValue={this.props.profile.location}/>
              </FormItem>
              <FormItem label="Profiilipilt">
                <Upload {...props2} beforeUpload={() => false} onChange={file => this.handleImageChange(file)}>
                    <Button>
                        <UploadOutlined /> Klikkige,et lisada fail
                    </Button>
                </Upload>
              </FormItem>
              <FormItem>
                <Button type="primary" htmlType="submit" shape="round" onClick={success} >
                  Uuenda profiili
                </Button>
              </FormItem>
            </Form>
          </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        token: state.token
    }
}

export default connect(mapStateToProps)(ProfileForm);