Angular 到 Django，在服务调用中传递多个参数

Question

我在 Django 上有一些工作代码，在那里我创建了一个简单的文件上传器，它带有一个通过视图传递的日期选择器，然后使用利用 sqlalchemy 的独立 python 类上传到数据库。

但是，我一直致力于将 UI 方面迁移到 Angular 前端，但遇到了障碍，不知道哪里出错了。用户需要能够上传 excel 二进制文件，输入日期并点击上传。这应该向视图发送请求，然后处理该请求。当从 Django HTML 模板输入文件和日期时，它自己的视图可以完美运行。但是一旦输入来自 Angular，我似乎无法让它工作。

目前我收到“不支持的媒体类型”错误消息。但我的猜测是我没有将文件和日期正确传递给服务。任何帮助都会很棒

这是我的代码

views.py

@api_view(('POST',))
@csrf_exempt
def uploader(request):
    if request.method == 'POST':
        try:
            instance= uploader(request.FILES['data'], request.POST['selectedDate'])
            _ = upload_instance.run_upload_process('data')
            upload_message = "Success"
            return Response(upload_message, status=status.HTTP_201_CREATED)
        except Exception as e:
            upload_message = 'Error: ' + str(e)
            return Response(upload_message, status=status.HTTP_400_BAD_REQUEST)

file-upload.service.ts

DJANGO_SERVER: string = "http://127.0.0.1:8000";

  constructor(private http:HttpClient) { }
  public upload(data: any, selectedDate:any) {
    return this.http.post<any>(`${this.DJANGO_SERVER}/upload/`, data, selectedDate);
  }

upload.component.ts

onChange(event: any) {
    this.filetoUpload = event.target.files[0];
  }

  inputEvent(event:any) {
    this.monthEndDate = event.value;
  }

  onUpload() {
    this.loading = !this.loading;
    this.fileUploadService.upload(this.filetoUpload, this.monthEndDate).subscribe(
      (event: any) => {
        if (typeof (event) === 'object') {
          this.shortLink = event.link;
          this.loading = false;
        }
      }
    )
  }

upload.component.html

 <div class="input-group">
                <input class="form-control" type="file" (change)="onChange($event)">
                <!-- <span><button (click)="onUpload()" class="btn btn-dark">Upload</button></span> -->
            </div>
            <br>
            <div class="input-group" style="font-size: 18px">
                <mat-form-field appearance="outline">
                    <mat-label>Choose a Date</mat-label>
                    <input matInput [matDatepicker]="picker" (dateInput)="inputEvent($event)">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
            </div>

Answer 1

Angular http post 方法接收三个参数

post(url, data, [config]);

所以，你可以改变你的方法如下

  DJANGO_SERVER: string = "http://127.0.0.1:8000";

  constructor(private http:HttpClient) { }
  public upload(data: any, selectedDate:any) {
    let postData = {
        data,
        selectedDate
    }
    return this.http.post<any>(`${this.DJANGO_SERVER}/upload/`, postData);
  } 

在 Django 服务器中，调整您的代码以正确访问帖子正文。