Блог

Главная - Вопросы по программированию - Ошибка при отправке файла в Django API из Angular

Ошибка при отправке файла в Django API из Angular

#django #angular #api

Вопрос:

Я использую Django в качестве своего API и пытаюсь загрузить Pdf-файл из Angular. Я использовал HttpModule для публикации файла с именем, компанией, годом и документом

Я протестировал URL-адрес публикации на Postman, и он работает ссылка на API postman, показывающая, что запрос на публикацию был успешным

Когда я нажимаю кнопку загрузить, на вкладке Сеть нет активности и нет вывода на консоль

Это мой API Django

url.py

 router = routers.DefaultRouter()
router.register(r'reports', views.ReportViewSet)

urlpatterns = [
    path('', include(router.urls)),
    url(r'^upload/

serializers.py


 from .models import Report

class ReportSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Report
        fields = ('name', 'company', 'year', 'document')
 


Угловой код в app.component.ts


 export class AppComponent {
  title = 'angular-frontend'
  name!: string;
  company!: string;
  year!: string;
  document!: File;

  constructor(private http: HttpClient) { }

  onNameChanged(event: any) {
    this.name = event.target.value;
  }
  onCompanyChanged(event: any) {
    this.company = event.target.value
  }
  onYearChanged(event: any) {
    this.year = event.target.value
  }
  onDocumentChanged(event: any) {
    this.document = event.target.files[0];
  }

  Upload() {
    const uploadData: FormData = new FormData();
    uploadData.append('name', this.name);
    uploadData.append('company', this.company);
    uploadData.append('year', this.year);
    uploadData.append('document', this.document);
    this.http.post('http://127.0.0.1:8000/api/reports/', uploadData).subscribe(
      data => console.log(data),
      error => console.log(error)
    )
  }
}
 


app.component.html


 <label>
    Name:
    <input type="text" (change)="onNameChanged($event)" />
</label>
<br />
<label>
    Company:
    <input type="text" (change)="onCompanyChanged($event)" />
</label>
<br />
<label>
    Year:
    <input type="text" (change)="onYearChanged($event)" />
</label>
<br />
<label>
    Document:
    <input type="file" (change)="onDocumentChanged($event)" />
</label>
<br />

<button type="submit" ng-click="Upload()">Upload</button>

Комментарии:

1. Попробуйте перейти с ng-click на (нажмите) <тип кнопки="Отправить" (нажмите)="Загрузить()">Загрузить<тип кнопки="Отправить" (нажмите)="Загрузить()"></кнопка> Я считаю, что ng-click исходит от AngularJS, а не от углового

2. Я использовал (нажмите), но у меня то же самое, на вкладке "Сеть" нет активности, не уверен, что щелчок вызывает метод загрузки() для ПУБЛИКАЦИИ

, TestUploadView.as_view(), name='upload'),
#path('api-auth/', include('rest_framework.urls', namespace='rest_framework')),
] static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
serializers.py



Угловой код в app.component.ts




app.component.html




Комментарии:


1.  Попробуйте перейти с ng-click на (нажмите) <тип кнопки=»Отправить» (нажмите)=»Загрузить()»>Загрузить<тип кнопки=»Отправить» (нажмите)=»Загрузить()»></кнопка> Я считаю, что ng-click исходит от AngularJS, а не от углового  


2.  Я использовал (нажмите), но у меня то же самое, на вкладке «Сеть» нет активности, не уверен, что щелчок вызывает метод загрузки() для ПУБЛИКАЦИИ  








	Метки: