Почему после загрузки поле изображения отображается как null, а также возникает ошибка многочастичной формы? Есть ли способ обернуть FormData в post_create в auth.js?

При нажатии на кнопку submit я получаю ошибку MultiPartParser : { "detail": "Ошибка разбора многочастной формы - Неверная граница в многочастной форме: None" }. Поле изображения также равно null. Невозможно изменить состояние FormData. Ниже приведен мой код от бэкенда views до PostData во фронтенде. Я использую react и django.

Вот мой код views.py.

class ManagePostingView(APIView):
parser_classes = [MultiPartParser, FormParser]

def post(self, request, format=None):
            request.data['user'] = request.user.id     
            serializer = PostListSerializer(data=request.data)
            if serializer.is_valid():
                serializer.save()
                return Response(serializer.data, status=status.HTTP_201_CREATED)
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Вот мой код auth.js для пост запроса.`

export const post_create = (title, content, image) => async (dispatch) => {
  if (localStorage.getItem("access")) {
    const config = {
      headers: {
      "Content-Type": "multipart/form-data",
      Authorization: `JWT ${localStorage.getItem("access")}`,
    },
  };

const body = {
  title,
  content,
  image,
};

try {
  const res = await axios.post(
    `${process.env.REACT_APP_API_URL}/api/list/PostView/`,
    body,
    config
  );
  dispatch(load_user());
  if (res.data != null) {
    dispatch({
      type: POST_DATA_SUCCESS,
      payload: res.data,
    });
  } else {
    dispatch({
      type: POST_DATA_FAIL,
    });
  }
} catch (err) {
  dispatch({
    type: POST_DATA_FAIL,
  });
    }
  }
};

Ниже представлен PotData.js Здесь он передает данные от пользователя в post_create, чтобы они могли быть отправлены в бэкенд.

import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { connect } from "react-redux";
import { post_create } from "../actions/auth";

const PostData = ({ post_create, isAuthenticated }) => {
const [accountCreated, setAccountCreated] = useState(false);
const [postimage, setPostImage] = useState(null);
const [formData, setFormData] = useState({
  title: "",
  content: "",
  image: "",
});

const { title, content, image } = formData;

const onChange = (e) => {4p
  if ([e.target.name] == "image") {
    setPostImage({ postimage: e.target.files });
  }
  if ([e.target.name] == "content") {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }
  if ([e.target.name] == "title") {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }
};

const onSubmit = (e) => {
  e.preventDefault();
  post_create(title, content, image);
  setAccountCreated(true);
};

if (accountCreated) {
  return <Redirect to="/login" />;
}
  return (
    <div className="container mt-5">
      <h1>Admin page </h1>
      <p>Make a New post</p>
      <form onSubmit={(e) => onSubmit(e)}>
        <div className="form-group">
          <input
            className="form-control"
            type="text"
            placeholder="Title*"
            name="title"
            value={title}
            onChange={(e) => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <input
            className="form-control"
            type="text"
            placeholder="Content*"
            name="content"
            value={content}
            onChange={(e) => onChange(e)}            
            required
          />
        </div>
        <div className="form-group">
          <input
            className="form-control"
            type="file"
            placeholder="Image*"
            name="image"
            value={image}
            onChange={(e) => onChange(e)}
          />
          </div>
        <button className="btn btn-primary" type="submit">
          Submit Details
        </button>
      </form>
    </div>
  );
};
const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps, { post_create })(PostData);

Я пытался решить эту проблему с помощью этого кода. Я застрял, когда пытался обернуть FormData функцией post_create в auth.js . Какое лучшее решение для этого?

const handleSubmit = (e) => {
    e.preventDefault();
    let formData = new FormData();
    formData.append('title', postData.title);
    formData.append('content', postData.content);
    formData.append('image', postimage.image[0]);
    post_create(formData)

Вернуться на верх