Как отправить данные формы из React Native в Django REST с помощью axios
У меня есть форма, которая в настоящее время отправляется в формате JSON. Мне нужно переключить ее на использование объекта FormData
, поскольку мне нужно добавить файл к запросу.
Django Rest ModelViewSet:
class BusinessProfileViewSet(MixedPermissionModelViewSet):
"""
API endpoint that allows business profiles to be viewed, created, or edited.
"""
queryset = BusinessProfile.objects.all().order_by('-created_on')
serializer_class = BusinessProfileSerializer
permission_classes_by_action = {
'list': [IsOwnerOrStaff],
'create': [AllowAny],
'update': [IsOwnerOrStaff],
'retrieve': [IsOwnerOrStaff],
'partial_update': [IsOwnerOrStaff],
'destroy': [IsAdminUser]
}
paginator = None
parser_classes = (MultiPartParser, FormParser,)
Реакция-родная:
const createFormData = (businessTypes, input) => {
const phone = formatPhoneNumForSubmission(input.phone);
const typeId = convertBusinessTypeToID(businessTypes);
const formData = new FormData();
formData.append("name", input.name);
formData.append("type", typeId);
formData.append("email", input.email);
formData.append("phone", phone);
formData.append("street_address", input.street_address);
formData.append("city", input.city);
formData.append("state", input.state);
formData.append("zip_code", input.zip_code);
return formData;
};
const handleSubmit = () => {
const formData = createFormData(businessTypes, newInput);
dispatch(createBusiness(formData));
}
};
Redux dispatch using axios:
export const createBusiness = createAsyncThunk(
"business/createBusiness",
async (body, { rejectWithValue }) => {
try {
const response = await axiosInstance.post("/api/businesses/", body);
return response.data;
} catch (err) {
console.log(err.response.data);
return rejectWithValue(err.response.data);
}
}
);
Выход console.log(formData)
:
Form data: FormData {
"_parts": Array [
Array [
"name",
"Dqwd",
],
Array [
"type",
1,
],
Array [
"email",
"qwd@dw.co",
],
Array [
"phone",
"+115598983333",
],
Array [
"street_address",
"Dqwd",
],
Array [
"city",
"Qwd",
],
Array [
"state",
"Dw",
],
Array [
"zip_code",
"22222",
],
],
}
Ответ на ошибку сервера:
Объект { "detail": "Неподдерживаемый тип медиа "application/json" в запросе.", }
Redux с многокомпонентными заголовками возвращает такой ответ:
Объект { "detail": "Ошибка разбора многосторонней формы - Неверная граница в многосторонней форме: None", }
Я еще не прикрепил файл к этому, так как я просто хочу убедиться, что я могу отправить данные формы перед добавлением файлов.
Почему сервер получает это в формате JSON? Любая помощь будет принята с благодарностью.
Попробуйте таким образом
const formData = new FormData();
formData.append("name", input.name);
formData.append("type", typeId);
formData.append("email", input.email);
formData.append("phone", phone);
formData.append("street_address", input.street_address);
formData.append("city", input.city);
formData.append("state", input.state);
formData.append("zip_code", input.zip_code);
А затем отправьте запрос следующим образом, используя axios
const axiosConfig = {
headers: {
//Your header goes here. if there are no headers send empty object.
},
};
let response = await axios
.post(URL, formData, axiosConfig)
.catch(function (error) {
console.log(error)
});
return response