如何将Angular前端对接现有Django自定义文件上传视图接口

一、后端Django侧修正 #

1. 解决跨域问题 #

Angular和Django端口不同存在跨域限制，先安装依赖：
pip install django-cors-headers
然后修改settings.py配置：

• INSTALLED_APPS中添加'corsheaders'
• MIDDLEWARE列表最开头插入'corsheaders.middleware.CorsMiddleware'
• 末尾新增配置CORS_ALLOW_ALL_ORIGINS = True（开发环境使用，生产环境替换为指定允许的域名）

2. 修正视图代码 #

你当前视图直接使用DRF的Response会报错，普通Django函数视图需要添加DRF的api_view装饰器，同时移除不必要的form字段判断，修正后代码：

from rest_framework.response import Response
from rest_framework import status
from rest_framework.decorators import api_view

@api_view(['POST'])
def clickToUpload(request):
    if request.method == 'POST':
        try:
            # 直接从请求中提取文件和日期参数
            upload_instance = uploader(request.FILES['file'], request.data['date'])
            _ = upload_instance.run_process('File', update_log=True)
            return Response({"status": "success", "msg": "上传成功"}, status=status.HTTP_200_OK)
        except Exception as e:
            return Response({"status": "error", "msg": 'Error: ' + str(e)}, status=status.HTTP_400_BAD_REQUEST)

3. 确认路由配置 #

确保urls.py中已经配置对应路由指向该视图，路径和Angular中请求的/lcr-upload/upload/保持一致即可。

二、前端Angular侧修正 #

1. 修正upload.component.ts #

当前代码没有获取日期选择器的值，也没有用FormData封装上传参数，直接传文件后端无法识别，修正后代码：

// 先给组件添加对应属性
selectedDate: Date | null = null;
file: File | null = null;
loading = false;
shortLink = '';

constructor(private fileUploadService: FileUploadService) { }

ngOnInit(): void {
}

onChange(event: any) {
  this.file = event.target.files[0];
  console.log("选中的文件: ", this.file)
}

// 新增日期选择值变化的绑定方法
onDateChange(event: any) {
  this.selectedDate = event.value;
}

onUpload() {
  if (!this.file || !this.selectedDate) {
    alert("请先选择文件和上传日期");
    return;
  }
  this.loading = true;
  // 构造FormData对象封装请求参数
  const formData = new FormData();
  formData.append('file', this.file);
  // 格式化日期，格式和后端uploader类要求的一致即可，示例为YYYY-MM-DD格式
  const formatDate = this.selectedDate.getFullYear() + '-' + 
    String(this.selectedDate.getMonth() + 1).padStart(2, '0') + '-' +
    String(this.selectedDate.getDate()).padStart(2, '0');
  formData.append('date', formatDate);

  this.fileUploadService.upload(formData).subscribe({
    next: (res) => {
      this.loading = false;
      if (res.status === 'success') {
        console.log("上传成功", res.msg);
        // 你的后续业务逻辑
      } else {
        console.error("上传失败", res.msg);
      }
    },
    error: (err) => {
      this.loading = false;
      console.error("请求出错", err.error?.msg || err.message);
    }
  })
}

2. 修正upload.component.html #

给日期选择器绑定值变化事件：

<div class="input-group">
    <input class="form-control" type="file" (change)="onChange($event)">
</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" (dateChange)="onDateChange($event)">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</div>
<div class="input-group" style="font-size: 18px">
    <button class="btn btn-success" (click)="onUpload()" [disabled]="loading">
      {{ loading ? '上传中...' : 'Upload' }}
    </button>
</div>

3. file-upload.service.ts无需改动，现有逻辑正常可用，HttpClient发送FormData时会自动添加正确的请求头。 #

内容的提问来源于stack exchange，提问作者LearnerCode