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

Question

注意：我不想使用FormData，如果可能的话，我想使用FormControl

我有一个表单，它向Django服务器发送一些数据，然后由它处理并存储数据

这是我的Django函数

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)

这是角形

  <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>

如您所见，我使用^{}来处理输入文件

以下是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 => {}
      );    
  }

当我检查控制台时，我将图像信息发送到服务器，但是当我返回request.FILES 在Django，它是空的

{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"

如果有帮助的话，我也会使用DjangResetFramework

那么，将文件数据发送到Django并存储有什么不对呢

Answer 1

后端可能使用简单的JSON parser而不是Multipart parser。 检查Django设置以查看您使用的解析器

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})

有关详细信息，请参见Django rest framework parsers