使用 Django Rest Framework 将输入文件从 Vue.js 发送到 Django 时出现问题

Posted 2023-02-22

【中文标题】使用 Django Rest Framework 将输入文件从 Vue.js 发送到 Django 时出现问题

【英文标题】：Problems sending input file from Vue.js to Django with Django Rest Framework

【发布时间】：2019-08-01 14:56:03

【问题描述】：

我正在尝试使用 DRF 将表单从 Vue.js 发送到 Django。但是响应是 400 Patch error:

"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()"/>

这里是 Vue 方法。我发送 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',
    )

【问题讨论】：

Ajax post a file from a form with Axios的可能重复

火焰，谢谢你的回答。解决方案可能是相同的，但我不知道问题出在 javascript 中还是 Django 中。

【参考方案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 =>  ...

【讨论】：

非常感谢 mehamasum。我之前尝试过，但我遇到了 'content-type': 'multipart/form-data' 的问题。删除它，表单工作正常。