Angular 到 Django,在服务调用中传递多个参数
Angular to Django, passing multiple parameters in a service call
我在 Django 上有一些工作代码,我在其中创建了一个简单的文件上传器,其中包含一个通过视图传递的日期选择器,然后使用独立的 python class 上传到数据库利用 sqlalchemy。
但是,我一直在努力将 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)
文件-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>
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 服务器中,调整您的代码以正确访问 post 正文。
我在 Django 上有一些工作代码,我在其中创建了一个简单的文件上传器,其中包含一个通过视图传递的日期选择器,然后使用独立的 python class 上传到数据库利用 sqlalchemy。
但是,我一直在努力将 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)
文件-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>
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 服务器中,调整您的代码以正确访问 post 正文。