我无法将图像从 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)
序列化器应该是小写的。
当用户在我的 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)>]}>
这是我在视图中尝试序列化它时遇到的完整错误。
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)
序列化器应该是小写的。