我无法将图像从 React 上传到 Django 后端

I can't Upload Images from React to Django backend

当用户在我的 React 前端的 CreatePost 组件中发送 post 请求时,我试图让用户可以将图像添加到他们的 post。

这是我从 React <QueryDict: {'title': ['post for test'], 'content': ['Donec condimentum ex quis arcu pulvinar hendrerit. Pellentesque nec massa varius, sodales nisi imperdiet, efficitur velit. Etiam accumsan est metus, ac commodo risus fringilla a. Cras sodales t`enter code here`incidunt dui nec imperdiet. Donec eu sagittis felis. Maecenas eu ultricies nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.'], 'author': ['1'], 'image': [<InMemoryUploadedFile: 181-1816289_anime-landscape-particles-scenic-pretty-beautiful-beautiful-anime.jpg (image/jpeg)>]}>

发送到后端的 object

这是我在视图中尝试序列化它时遇到的完整错误。

Internal Server Error: /api/create-post/
Traceback (most recent call last):
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\django\core\handlers\exception.py", line 47, in inner
    response = get_response(request)
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\django\core\handlers\base.py", line 204, in _get_response
    response = response.render()
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\django\template\response.py", line 105, in render
    self.content = self.rendered_content
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\rest_framework\response.py", line 70, in rendered_content
    ret = renderer.render(self.data, accepted_media_type, context)
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\rest_framework\renderers.py", line 100, in render
    ret = json.dumps(
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\rest_framework\utils\json.py", line 25, in dumps
    return json.dumps(*args, **kwargs)
  File "c:\users\kenny\appdata\local\programs\python\python38-32\lib\json\__init__.py", line 234, in dumps
    return cls(
  File "c:\users\kenny\appdata\local\programs\python\python38-32\lib\json\encoder.py", line 199, in encode
    chunks = self.iterencode(o, _one_shot=True)
  File "c:\users\kenny\appdata\local\programs\python\python38-32\lib\json\encoder.py", line 257, in iterencode
    return _iterencode(o, 0)
  File "C:\Users\kenny\.virtualenvs\drf_react-uZeTBhos\lib\site-packages\rest_framework\utils\encoders.py", line 67, in default
    return super().default(obj)
  File "c:\users\kenny\appdata\local\programs\python\python38-32\lib\json\encoder.py", line 179, in default
    raise TypeError(f'Object of type {o.__class__.__name__} '
TypeError: Object of type property is not JSON serializable

这是我创建的post视图

class CreatePost(generics.CreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    parser_classes = [MultiPartParser, FormParser]

    def post(self, request, format=None):
        print(request.data)
        serializer = PostSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_200_OK)
        return Response(Serializer.errors,status=status.HTTP_400_BAD_REQUEST)

当我在后端本身对此进行测试时,post 已成功创建。在我将图像字段添加到 Post 模型以增加上传图像的可能性之前,这一直很有效。

我也将 headers 中的内容类型设置为“multipart/form-data”,就像这样

 axiosInstance
      .post("create-post/", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        this.props.history.replace("/dashboard");
        console.log(res);
      })
      .catch((response) => console.log(response.response));```
return Response(Serializer.errors,status=status.HTTP_400_BAD_REQUEST)

序列化器应该是小写的。