使用redux将react中的图像发布到Django Rest API时出现问题

Question

我正试图从一个react表单在Django API中发布一个图像，但没有成功。我也在使用AntDesign库和redux中的图像上传器。

这是我迄今为止尝试过的代码：

-表单代码：

class ArticleForm extends React.Component {
this.props.onSendNewArticle(
fieldsValue.upload.fileList[0].originFileObj);
render() {
<Form.Item
name="upload"
label="Image"
onPreview={this.handlePreview}>
<Upload accept=".jpeg, .png" beforeUpload={() => false}>
<Button>
<UploadOutlined /> Choisir une image
</Button>
</Upload>
</Form.Item>
}
const mapStateToProps = (state) => {
return {
loading_add_article: state.add_article.loading_add_article,
error_add_article: state.add_article.error_add_article,
};
};
const mapDispatchToProps = (dispatch) => {
return {
onSendNewArticle: (image) =>
dispatch(actions.articleAdded(image)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(CourseForm);

-这是我的看法.py

class ArticleCreateView(APIView):

parser_classes = (MultiPartParser, FormParser)
def post(self, request, *args, **kwargs):
article_serializer = ArticleSerializer(data=request.data)

if article_serializer.is_valid():
article_serializer.save()
return Response(article_serializer.data, status=status.HTTP_201_CREATED)
else:
print('error', article_serializer.errors)
return Response(article_serializer.errors, status=status.HTTP_400_BAD_REQUEST)

-这是我的商店/actions/addArticle.js:

export const articleAdded = ( image) => {
return (dispatch) => {
dispatch(articleDispached);
axios
.post("http://localhost:8000/api/create/", {
img: image
})
.then((res) => {
const course = res.data;
dispatch(articleAddSucess(course));
})
.catch((err) => {
dispatch(articleAddFailed(err));
});
};
};

这是我得到的错误：

POST http://localhost:8000/api/create/ 415 (Unsupported Media Type)

Answer 1

export const articleAdded = ( image) => {
return (dispatch) => {
dispatch(articleDispached);
axios
.post("http://localhost:8000/api/create/", {
img: image
headers: { "content-type": "multipart/form-data" },
})
.then((res) => {
const course = res.data;
dispatch(articleAddSucess(course));
})
.catch((err) => {
dispatch(articleAddFailed(err));
});
};
};