Django/React 415 (Неподдерживаемый тип носителя)
Я получаю POST http://localhost:8000/api/reports/ 415 (Unsupported Media Type)
при попытке отправить форму из React и не понимаю, в чем проблема.
Вот код.
models.py
class Report(models.Model):
category = models.ForeignKey(Category, on_delete=models.PROTECT)
description = models.TextField()
address = models.CharField(max_length=500)
reporter_first_name = models.CharField(max_length=250)
reporter_last_name = models.CharField(max_length=250)
reporter_email = models.CharField(max_length=250)
reporter_phone = models.CharField(max_length=250)
report_image_1 = models.ImageField(_("Image"), upload_to=upload_to, null=True, blank=True)
report_image_2 = models.ImageField(_("Image"), upload_to=upload_to, null=True, blank=True)
report_image_3 = models.ImageField(_("Image"), upload_to=upload_to, null=True, blank=True)
date = models.DateTimeField(default=timezone.now)
class Meta:
ordering = ('-date',)
def __str__(self):
return self.description
Я также пытался установить значения по умолчанию для изображений, но все равно получаю ошибку.
serializers.py
class ReportSerializer(serializers.ModelSerializer):
categoryName = CategorySerializer(many=False, read_only=True, source='category')
class Meta:
model = Report
fields = '__all__'
views.py
class ManageReports(viewsets.ModelViewSet):
serializer_class = ReportSerializer
parser_classes = [MultiPartParser, FormParser]
def get_object(self, queryset=None, **kwargs):
id = self.kwargs.get('pk')
return get_object_or_404(Report, id=id)
def get_queryset(self):
return Report.objects.all()
Это код, отвечающий за отправку.
report.js
const initialPostData = Object.freeze({
category: '',
address: '',
description: '',
reporter_first_name: '',
reporter_last_name: '',
reporter_email: '',
reporter_phone: '',
});
const [postData, updatePostData] = useState(initialPostData);
const [postImage1, setPostImage1] = useState({image: null});
const [postImage2, setPostImage2] = useState({image: null});
const [postImage3, setPostImage3] = useState({image: null});
const handleChange = (e) => {
if([e.target.name] == 'reporter_image_1') {
setPostImage1({
image: e.target.files[0],
});
} else if([e.target.name] == 'reporter_image_2') {
setPostImage2({
image: e.target.files[0],
});
} else if([e.target.name] == 'reporter_image_3') {
setPostImage3({
image: e.target.files[0],
});
} else if([e.target.name] == 'category') {
updatePostData({
...postData,
[e.target.name]: e.target.value,
});
} else {
updatePostData({
...postData,
[e.target.name]: e.target.value.trim(),
});
}
};
const handleSubmit = async(e) => {
e.preventDefault();
let formData = new FormData();
formData.append('category', postData.category);
formData.append('address', postData.address);
formData.append('description', postData.description);
formData.append('reporter_first_name', postData.reporter_first_name);
formData.append('reporter_last_name', postData.reporter_last_name);
formData.append('reporter_email', postData.reporter_email);
formData.append('reporter_image_1', postImage1.image);
formData.append('reporter_image_2', postImage2.image);
formData.append('reporter_image_3', postImage3.image);
const submitForm = await submitReport(formData);
А вот submitReport
API
API.js
const axiosInstance = axios.create({
baseURL: 'http://localhost:8000',
timeout: 5000,
headers: {
Authorization: accessToken
? 'JWT ' + accessToken
: null,
'Content-Type': 'application/json',
accept: 'application/json',
},
});
// Submit Report Form
const submitReport = async(formData) => {
const { data } = await axiosInstance.post('reports/', {...formData });
return data;
}
Здесь должны быть все файлы, необходимые для понимания происходящего.
Заранее спасибо.
Ваш атрибут parser_classes
в viewset неверен. Если вы хотите принимать формат JSON в теле запроса, вам нужно включить JSONParser
в атрибут parser_classes
.
Смотрите соответствующий раздел из здесь в документации DRF.
Я нашел решение, я использовал оператор spread в функции submitReport
, но вместо этого мне не нужно его использовать, так:
API.js
// Submit Report Form
const submitReport = async(formData) => {
const { data } = await axiosInstance.post('reports/', {...formData });
return data;
}
становится
// Submit Report Form
const submitReport = async(formData) => {
const { data } = await axiosInstance.post('reports/', formData);
return data;
}