Angular 8 使用 FormControl 将文件上传到 Django 服务器

Question

Note: I don't want to use FormData, want to use FormControl if is possible.

I have a form that send some data to Django server and it handle it and store the data.

Here is my Django funcion

def create(self, request):
  company = CompanyForm(request.data, request.FILES)
  if company.is_valid():
      company = company.save()
      serializer = CompanySerializer(company)
      return JsonResponse(request.data, safe=False)
  else:
      return JsonResponse(request.errors, safe=False)

This is the Angular Form

  <form [formGroup]="companyForm" id="ngForm" enctype="multipart/form-data" 
    #documentEditForm="ngForm" (ngSubmit)="CreateCompany()">

    //Some other fields.

    <mat-form-field>
      <ngx-mat-file-input formControlName="com_logo" placeholder="Logo"></ngx-mat-file-input>
      <mat-icon matSuffix>folder</mat-icon>
    </mat-form-field>
  </form>

As you see I use the ngx-mat-file-input for input file handling

here is the component codes for FormControl

 companyForm = new FormGroup({
    com_name: new FormControl('', Validators.required),
    com_owner: new FormControl('', Validators.required),
    com_phone: new FormControl('', Validators.required),
    com_address: new FormControl(),
    com_email: new FormControl(),
    com_status: new FormControl(),
    com_website: new FormControl(),
    com_logo: new FormControl(),
  });
  // From Array of errors to show on front end.
  formErrors: any = {}

  CreateCompany(): void {        
    this.apiService.createItem(this.companyForm.value, 'company').subscribe(
        result => {},
        error => {}
      );    
  }

As I checked the console, I send the image info to server, but when I return the request.FILES on Django it is empty.

{com_name: "Pomtech", com_owner: "JSsss", com_phone: "072044920", com_address: "9170 N. Beacon Rd",…}
com_name: "Pomtech"
com_owner: "JSsss"
com_phone: "072044920"
com_address: "9170 N. Beacon Rd"
com_email: "n.karimi@gmail.com"
com_status: null
com_website: null
com_logo: {_files: [{}], delimiter: ", ", _fileNames: "employer-13.png"}
_files: [{}]
delimiter: ", "
_fileNames: "employer-13.png"

Also I use DjangoResetFramework, if help.

So what is wrong to send file data to Django and store that?

Answer 1

The backend is probably using a simple JSON parser instead of a Multipart parser . Check your Django settings to see what parser are you using.

from rest_framework.decorators import api_view
from rest_framework.decorators import parser_classes
from rest_framework.parsers import MultiPartParser
@api_view(['POST'])
@parser_classes([MultiPartParser])
def example_view(request, format=None):
    # request.data has both files and other parsed data
    return Response({'received data and files': request.data})

See Django rest framework parsers for more