Блог

У меня есть базовое приложение django, которое просто загружает файл Excel в базу данных oracle. Я создал класс python (uploader) для выполнения некоторых проверок работоспособности файла и загрузки в базу данных.

Мне удалось успешно создать пользовательский интерфейс с использованием HTML в шаблонах Django, который отлично работает.

Тем не менее, я хотел перенести интерфейс на интерфейс Angular.

Я создал приложение angular, но в настоящее время я пытаюсь понять, как подключить интерфейс к django. Изучив онлайн, они советуют использовать модели, сериализаторы, но поскольку я выполняю загрузку через отдельный класс python, я не уверен, как соединить их с помощью этого метода. Я предполагаю, что мне нужно использовать HttpClient, чтобы каким-то образом подключиться к этому представлению?

Любая помощь будет принята с благодарностью. Спасибо

upload/views.py

 def clickToUpload(request):
if request.method == 'POST':
    if 'form' in request.POST:
        try:
            upload_instance = uploader(request.FILES['file'], request.POST['date'])
            _ = upload_instance.run_process('File', update_log=True)
            upload_message= "Success"
        except Exception as e:
            upload_message = 'Error: '   str(e)

     return render(request, 'Upload/upload.html', {'upload_message':upload_message})
 

Обновлено
views.py

 from rest_framework.response import Response
from rest_framework import status

def clickToUpload(request):
  if request.method == 'POST':
    if 'form' in request.POST:
        try:
            upload_instance = uploader(request.FILES['file'], request.POST['date'])
            _ = upload_instance.run_process('File', update_log=True)
            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

 export class FileUploadService {
  DJANGO_SERVER: string = "http://127.0.0.1:8000";
  constructor(private http:HttpClient) { }
  public upload(data: any) {
    return this.http.post<any>(`${this.DJANGO_SERVER}/lcr-upload/upload/`, data);
  }
}
 

upload.component.ts

 constructor(private fileUploadService: FileUploadService) { }

  ngOnInit(): void {
  }

  onChange(event: any) {
    this.file = event.target.files[0];
    console.log("This file is: "   this.file)
  }

  onUpload() {
    this.loading = !this.loading;
    console.log(this.file);
    this.fileUploadService.upload(this.file).subscribe(
      (event: any) => {
        if (typeof (event) === 'object') {
          this.shortLink = event.link;
          this.loading = false;
          console.log("OnUploadClicked")
        }
      }
    )
  }
}
 

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">
            <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()">Upload</button>
    </div>
 

Таким образом, вам нужно будет изменить свой текущий clickToUpload на конечную точку API в Django, которая в основном принимает ваш файл как данные формы. Он не должен возвращать представление вашему шаблону. В Angular вы будете вызывать эту конечную точку API, когда пользователь загружает файл.

Пример API для загрузки файлов Django (views.py ):

 from rest_framework.response import Response
from rest_framework import status

def clickToUpload(request):
  if request.method == 'POST':
    if 'form' in request.POST:
        try:
            upload_instance = uploader(request.FILES['file'], request.POST['date'])
            _ = upload_instance.run_process('File', update_log=True)
            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)
 

После создания API вам нужно будет создать службу в Angular, которая вызывает конечную точку и передает загруженные данные формы. Здесь есть хороший учебник.