Как отправить данные формы в POST-запросе в Nuxt 3 на django DRF

Я пытаюсь использовать Nuxt 3 в качестве сервера для передачи запросов API. Я хочу делать запросы FormData к Django DRF API через мой Nuxt сервер для POST данных и изображений.

В основном, задача состоит в заполнении простой формы данными и изображениями и отправке данных формы на бэкенд django. Вот более подробная информация.

В pages.vue:

const taskData = reactive({
  title: '',
  city: '',
  description: '',
  category: route.params.cat_slug,
  subCat: '',
  image_1: [],
  image_2: [],
  image_3: []
})

const submitTaskForm = async () => {
  let formData = new FormData()

  formData.append('title', taskData.title)
  formData.append('city', taskData.city)
  formData.append('description', taskData.description)
  formData.append('category', taskData.category)
  formData.append('subCat', taskData.subCat)
  taskData.image_1.forEach((fileItem) => {
    formData.append('image_1', fileItem.file)
  })
  taskData.image_2.forEach((fileItem) => {
    formData.append('image_2', fileItem.file)
  })
  taskData.image_3.forEach((fileItem) => {
    formData.append('image_3', fileItem.file)
  })

  const data = await useFetch('/api/tasks/add/', {
    method: 'POST',
    body: formData
  })

  return data
}

в /server/api/add.post.ts

export default defineEventHandler(async (event) => {
    const body = await readBody(event)
    const access = getCookie(event, 'access') || null

    try {
        const data = await $fetch(process.env.API_BASE_URL + "/api/tasks/add/", {
            method: "POST",
            body: body,
            headers: {
                Authorization: "Bearer " + access,
            },
        })
        return data

    } catch (error) {
        console.log(error);
        return error
    }
})

теперь бэкенд часть с представлением, обрабатывающим форму:

class TasksCreate(APIView):
    permission_classes = (permissions.IsAuthenticated,)
    serializer_class = TasksSerializer
    parser_classes = [MultiPartParser, FormParser]

    def post(self, request):
        data = self.request.data

        title = data['title']
        city = data['city']
        description = data['description']
        category_slug = data['category']
        subCat = data['subCat']
        image_1 = request.FILES.get('image_1', "")
        image_2 = request.FILES.get('image_2', "")
        image_3 = request.FILES.get('image_3', "")

        try:
            if not Subcategories.objects.filter(slug=subCat, category__slug=category_slug).exists():
                return Response(
                    {'error': 'The subcategory does not correspond to the category.', },
                    status=status.HTTP_400_BAD_REQUEST
                )

            task = Task.objects.create(
                title=title,
                city=city,
                description=description,
                slug='%s-%s' % (slugify(title), randint(1000, 10000)),
                category=get_object_or_404(Category, slug=category_slug),
                sub_category = get_object_or_404(Subcategories, slug=subCat),
                created_by=request.user,
                image_1=image_1,
                image_2=image_2,
                image_3=image_3,
            )

            task.save()

            return Response(
                {'task': 'Task created successfully', },
                status=status.HTTP_201_CREATED
            )
        except Exception as e:
            print(e)
            return Response(
                {'error': 'Something went wrong when creating the task'},
                status=status.HTTP_500_INTERNAL_SERVER_ERROR
            )

ошибка: Unsupported Media Type: /api/tasks/add/

Я пробовал с readBody readRawBody readMultipartFormData, а также добавлял "Content-Type": "multipart/form-data" в заголовки.

Кроме того, прямое попадание в представление с помощью Postman работает отлично, поэтому я предполагаю, что это nuxt 3 не отправляет правильно форму.

Вернуться на верх