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

Question

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

我有一个表单，可以将一些数据发送到 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>

如您所见，我使用该ngx-mat-file-input进行输入文件处理

这是表单控件的组件代码

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: "[e-mail]"
com_status: null
com_website: null
com_logo: {_files: [{}], delimiter: ", ", _fileNames: "employer-13.png"}
_files: [{}]
delimiter: ", "
_fileNames: "employer-13.png"

我也使用DjangoResetFramework，如果有帮助的话。

那么将文件数据发送到 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 框架解析器了解更多信息