Проблемы с отправкой входного файла из Vue.js в Django с Django Rest Framework

Question

Я пытаюсь отправить форму из Vue.js в Django с помощью DRF. Но ответ 400 Ошибка исправления:

{"file":["The submitted data was not a file. Check the encoding type on the form."]}

Это мой шаблон в Vue.js: Шаблон:

  <input type="file" id="file" ref="file" class="input is-rounded" v-on:change="handleFileUpload()"/>

А вот и Вью методы. Я отправляю enctype: 'multipart / form-data' и думаю, что использую правильный способ отправки файла. Во всяком случае, я думаю, что здесь проблема, возможно, this.file не отправляет файл правильно.

HTTP является константой Axios: "const HTTP = axios.create ({})"

 methods: {
 handleFileUpload(){
    this.file = this.$refs.file.files[0];
  },
 create: function () {
  this.token = this.$store.state.access_token;

    HTTP({
      method: 'PATCH',
      url: 'tickets/create/',
      enctype: 'multipart/form-data',
      headers: {
        'Authorization': `Bearer ${this.token}`,
      },
      data: {
        file:this.file,
      }
    })
    .then(response => { ...

А вот мой метод view.py:

  @csrf_exempt
  @api_view(['GET', 'POST','PATCH'])
  def Create(request):
     parser_classes = (FileUploadParser,)

  if request.method == 'PATCH' or request.method == 'POST':


    serializer = CreateTicketSerializer(
        Tickets,
        data=request.data
    )
    serializer.is_valid(raise_exception=True)

    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    else:
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
#Return this if request method is not POST
return Response({'ok': 'false'}, status=status.HTTP_200_OK)

И мой сериализатор:

 class CreateTicketSerializer(serializers.ModelSerializer):
    """Ticket serializer."""


   file = serializers.ImageField(required=False,max_length=None, use_url=True)

class Meta:
    model = Tickets
    fields = (
        'file',
    )

Answer 1

Вам необходимо использовать FormData API для создания набора пар ключ / значение, представляющих поля формы и их значения:

create: function () {
    this.token = this.$store.state.access_token;

    let data = new FormData(); // creates a new FormData object
    data.append('file', this.file); // add your file to form data

    HTTP({
      method: 'PATCH',
      url: 'tickets/create/',
      headers: {
        'Authorization': `Bearer ${this.token}`,
        'content-type': 'multipart/form-data'
      },
      data
    })
    .then(response => { ...