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

Question

我正在尝试使用 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',
    )

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 => { ...