Facing ErrorDetail(string='Отправленные данные не были файлом. Проверьте тип кодировки в форме.', code='invalid') -Django Rest + React
У меня есть страница редактирования профиля, где пользователь может редактировать ранее введенную информацию. Форма также содержит поле изображения. Я получаю данные из бэкенда и заполняю поля существующими данными. Данные для изображения - это путь к папке media, где хранится изображение после загрузки. Теперь предположим, что пользователь не хочет менять ранее введенное изображение и отправляет форму, я получаю следующую ошибку
{'profile_photo': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')]}
Пожалуйста, подскажите, что мне делать для борьбы с этой ошибкой, если файл изображения не получен в request.data
Ниже приведены коды
views.py
api_view(['PUT'])
@permission_classes([IsAuthenticated])
@parser_classes([MultiPartParser, FormParser])
def edit_teacher_detail(request):
data = request.data
if data is not None:
id = data.get('id')
queryset = TeacherDetail.objects.get(id = id)
serializer = TeacherDetailSerializer(instance=queryset, data = data)
try:
if serializer.is_valid():
serializer.save()
return Response(status=status.HTTP_200_OK)
else:
print(f'\nThis is the error in the serialization {serializer._errors}\n')
return Response({'message': serializer._errors}, status=status.HTTP_400_BAD_REQUEST)
except Exception as e:
print(e)
return Response(status=500)
reactjs API отправляет данные
export const editTeacherDetail = async (detailsData, photo) => {
let formData = new FormData();
formData.append("id", detailsData.id);
formData.append("is_verified", true);
formData.append("name", detailsData.name.toUpperCase());
formData.append("adhaar_number", detailsData.adhaar_number);
formData.append("phone", detailsData.phone);
formData.append("location", detailsData.location.toUpperCase());
formData.append("full_address", detailsData.full_address.toUpperCase());
formData.append("age", detailsData.age);
formData.append("gender", detailsData.gender.toUpperCase());
formData.append("name_of_school", detailsData.name_of_school.toUpperCase());
formData.append("experience", detailsData.experience);
formData.append("teach_for_no_days", detailsData.teach_for_no_days);
formData.append("subject", detailsData.subject.toUpperCase());
formData.append("teach_class", detailsData.teach_class);
formData.append("home_tuition", detailsData.home_tuition);
formData.append("fees", detailsData.fees);
formData.append("home_tuition_fees", detailsData.home_tuition_fees);
formData.append("shift", detailsData.shift.toUpperCase());
formData.append("board", detailsData.board.toUpperCase());
formData.append("profile_photo", photo.image); // this is the image field
try {
let response = await axiosInstance.put(`/teacher/edit-detail/`, formData);
return response;
} catch (error) {
if (error.response) {
ToastNotification(
"We are facing some problems. Please try again later",
"error"
);
return error.response;
} else {
return error.request;
}
}
};
если пользователь не загрузил изображение, это то, что будет передано formData.append("profile_photo", photo.image);
/media/photos/2022/05/12/jgs.jpeg
Вы можете взять форму напрямую:
def edit_teacher_detail(request):
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = YourForm(request.POST)
# check whether it's valid:
if form.is_valid():
# process the data in form.cleaned_data as required
# ...
# redirect to a new URL:
return HttpResponseRedirect('/thanks/')
PD: Я думаю, что вы можете передать форму с помощью PUT
Я придумал способ контролировать отправку
formData.append("profile_photo", photo.image);
из самого фронтенда.
Что я сделал в react, так это проверил, является ли typeof photo.image строкой или нет. Если это строка, это означает, что файл не был загружен, и он содержит путь url, поэтому я не добавляю его в FormData, в противном случае я добавляю его. Ниже приведен мой код
реактивная часть
if (typeof photo.image === "string") {
} else {
formData.append("profile_photo", photo.image);
}
Я не знаю, является ли этот способ эффективным. Но на данный момент это работает для меня. Пожалуйста, подскажите, если у кого-то есть лучший способ обработки этого в бэкенде.