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

npm install @angular/forms

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file.xml']
})
export class FileUploadComponent {
  fileForm = new FormGroup({
    file: new FormControl(null)
  });

  onFileChange(event) {
    const file = event.target.files[0];
    this.fileForm.get('file').setValue(file);
  }

  onSubmit() {
    const formData = new FormData();
    formData.append('file', this.fileForm.get('file').value);

    fetch('http://your-django-server/upload/', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  }
}

<form [formGroup]="fileForm" (ngSubmit)="onSubmit()">
  <input type="file" (change)="onFileChange($event)" formControlName="file">
  <button type="submit">Upload</button>
</form>

pip install django pillow

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.core.files.storage import default_storage
from django.core.files.base import ContentFile

@csrf_exempt
def upload_file(request):
    if request.method == 'POST':
        file = request.FILES['file']
        file_name = default_storage.save(file.name, ContentFile(file.read()))
        return JsonResponse({'file_name': file_name})
    return JsonResponse({'error': 'Invalid request'}, status=400)

from django.urls import path
from .views import upload_file

urlpatterns = [
    path('upload/', upload_file, name='upload_file'),
]