Как отправить данные формы из 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 
Вернуться на верх