Reactjs React和Django无法使用React挂钩和formData（）发布图像

我正在尝试将图像上传到我的Django模型，可以使用postman提供的相同API并按预期上传图像，但通过react发布时，我收到错误，并且在colsole formdata中无法创建要发送到API的对象

此外，如果我删除图片附加，一切都正常，那么在我的模型中imagefield可以为null

import React, { useState, useEffect } from "react";
import { FaExclamationCircle } from "react-icons/fa";
import { Button } from "../../globalStyles";
import { useForm } from "react-hook-form";
import { ErrorsSignUp, FormField, FormName } from "../Login/Login.element";
import {
PopContainer,
ModalWrapper,
FromContainer,
FormFieldImage,
} from "./AddItem.element";
import axios from "axios";

const AddItem = (
 callback,
{ showModal, seteShowModal },
requestType,
articleID
) => {
  const [values, setValues] = useState({
    title: "",
    price: "",
    category: "",
    quantity: "",
  });



const data = [
    {
      title: "new comer",
      description: "This is coming from form ",
      completed: true,
    },
  ];

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,

      [name]: value,
    });
  };



const handleSubmit = (e) => {
    const formData = new FormData();
    formData.append("title", values.title);
    formData.append("category", values.category);
    formData.append("quantity", values.quantity);
    formData.append("price", values.price);

    formData.append("picture", values.picture); # It works if I comment this 
 line out
    e.preventDefault();
    console.log("This is from console log", formData);
    axios
      .post("http://127.0.0.1:8000/api/item/", formData)
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.log(

err);
      });
  };

  return (
    <>
  <PopContainer>
    <ModalWrapper>
      <h1>Add new Item</h1>
      <FromContainer>
        <FormName>Item Name: </FormName>
        <FormField
          name="title"
          type="text"
          value={values.title}
          onChange={handleChange}
        ></FormField>

        <FormName>Price: </FormName>
        <FormField
          name="price"
          type="number"
          value={values.price}
          onChange={handleChange}
        ></FormField>

        <FormName>Category: </FormName>
        <FormField
          name="category"
          type="dropdown"
          value={values.category}
          onChange={handleChange}
        ></FormField>

        <FormName>Quantiry: </FormName>
        <FormField
          name="quantity"
          type="number"
          value={values.quantity}
          onChange={handleChange}
        ></FormField>

        <FormName>Picture: </FormName>
        <FormField
          type="file"
          name="picture"
          value={values.picture}
          onChange={handleChange}
        ></FormField>

        <Button onClick={handleSubmit}>Add Item</Button>
      </FromContainer>
    </ModalWrapper>


     </PopContainer>
    </>
  );
};

export default AddItem;

import React，{useState，useffect}来自“React”；
从“react icons/fa”导入{fa惊叹圈}；
从“../../globalStyles”导入{Button}；
从“react hook form”导入{useForm}；
从“./Login/Login.element”导入{ErrorsSignUp，FormField，FormName}；
进口{
PopContainer，
ModalWrapper，
FromContainer，
FormFieldImage，
}来自“/AddItem.element”；
从“axios”导入axios；
常量附加项=(
回拨，
{showModal，seteShowModal}，
请求类型，
文章ID
) => {
const[values，setValues]=useState({
标题：“，
价格：“，
类别：“，
数量：“，
});
常数数据=[
{
标题：“新来者”，
描述：“这是来自表单”，
完成：对，
},
];
常数handleChange=（e）=>{
常量{name，value}=e.target；
设定值({
价值观
[名称]：值，
});
};
常量handleSubmit=（e）=>{
const formData=new formData（）；
formData.append（“title”，values.title）；
formData.append（“category”，value.category）；
formData.append（“数量”，value.quantity）；
formData.append（“价格”，values.price）；
formData.append（“picture”，values.picture）#如果我对此进行注释，它会起作用
排队
e、 预防默认值（）；
log（“这是来自控制台日志”，formData）；
axios
.post（“http://127.0.0.1:8000/api/item/“，formData）
。然后（（响应）=>{
控制台日志（响应）；
})
.catch（（错误）=>{
console.log(
错误）；
});
};
返回(
添加新项目
项目名称：
价格：
类别：
数量：
图片：
添加项
);
};
导出默认附加项；