WedX - журнал о программировании и компьютерных науках

Не удалось отправить файлы с помощью angular 8 на бэкэнд laravel

Недавно я пытался загрузить файлы PDF с помощью Angular 8 и отправить данные в бэкэнд laravel.
Но интересно, что другие входные данные успешно достигают серверной части, за исключением файла.
push-book.component.html


  <form (ngSubmit) ="pushBook()" class="form"  enctype="multipart/form-data">
       <div>
           <input (change)="onFileSelected()" type="file" id="file" required>                          
       </div>
        <div class="cover-viewer">
            <pdf-viewer  [src]="pdfSrc"
                 [render-text]="true"
                 [page]="page" 
                 [show-all]="false"
                 style="display: block; width: 500px; height: 200px;">                 
              </pdf-viewer>
          </div>                       
          <div class="form-group">
              <button  class="btn btn-danger" id="upload_book">Upload Book</button>        
           </div> 
  </form>

push-book.component.ts

import { Component, OnInit, EventEmitter, Output, ElementRef, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/common'; 
import {MatSnackBar} from '@angular/material/snack-bar';
import {FormBuilder, FormGroup} from '@angular/forms';
import { PdfService } from '../services/pdf.service';
import { Book } from './book.model';
import {  FileUploader, FileSelectDirective } from 'ng2-file-upload';
import { DataService } from '../services/data.service';
import * as html2canvas from "html2canvas";


@Component({
  selector: 'app-push-book',
  templateUrl: './push-book.component.html',
  styleUrls: ['./push-book.component.scss']
})

export class PushBookComponent implements OnInit {
  input_message: string;
  pdfSrc:string = '';
  book = new Book(); 
  onFileSelected() { 
    let file: any = document.querySelector("#file");
    if(typeof (FileReader) !== 'undefined') {
      let reader = new FileReader();
      reader.onload = (e:any) => {
        this.pdfSrc = e.target.result;       
      }
      reader.readAsArrayBuffer(file.files[0]);
    }
      this.book.bookFile = file.files[0];
      console.log(this.book.bookFile)
      setTimeout(()=> {
        let testCanvas: any =document.querySelector('#page1');
         let _bookCover =  testCanvas.toDataURL();
         this.book.bookCover = _bookCover;
       }, 5000);
  }

  constructor( private elementRef: Ele[enter image description here][1]mentRef, private pdfService: PdfService, private snackBar: MatSnackBar, private dataService: DataService) {}
  ngOnInit() {        
    this.pdfSrc = this.pdfService.getPDF();     
      console.log(this.book)    
  }
  pushBook(){ 
    this.openSnackBar('Loading', '')
      this.dataService.uploadBook(this.book).subscribe(res => {
        this.openSnackBar('Upload Successfull', 'OK')
      }, err => {
        this.openSnackBar('Upload Failed', 'Try Again')
      })
  }
  openSnackBar(message: string, action: string){
    this.snackBar.open(message, action, {
      duration: 3000,
      verticalPosition: 'top'
        })
  } 

}

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})

export class DataService {   
  constructor(private httpClient: HttpClient) { }     
      //Push a book
        uploadBook(data){       
          return this.httpClient.post("https://192.168.0.38:8000/api/book", data);
        }
}

В моей форме я могу утешить успешно загруженный файл. Но на бэкэнде Laravel файл пуст



Новые материалы

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


Для любых предложений по сайту: [email protected]