Angular - как отправить загруженное изображение в классе. Или как изменить тип файла на тип Int8Array

#angular #image #upload

#angular #изображение #загрузка

Вопрос:

Я совсем новичок в javascript и Typescript. Мне действительно нужна помощь с этим. Я использую Angular 10 и Spring Boot. У меня есть интерфейс, подобный этому:

 export interface Product {
   productId?: number;
   sku: string;
   name: string;
   description: string;
   unitPrice: number;
   productImage: Int8Array;
   active: boolean;
   unitsInStock: number;
   dateTimeCreated: Date;
   dateTimeUpdated: Date;
}

И я использую форму, управляемую шаблоном Angular, для заполнения некоторых полей. Я хочу отправить изображение в этом объекте в поле ProductImage: Int8Array. Таков план.

HTML выглядит следующим образом (плюс входные данные для других полей):

  <input type="file" accept="image/*"
               (change)="onFileChange($event)">

и класс:

 image:File;
public onFileChange(event) {
    this.image = event.target.files[0];
  }

итак, как я могу изменить image: File на ProductImage: Int8Array? Или, может быть, мне следует отправить его другим способом?

Ответ №1:

посмотрим, поможет ли это HTML

 <div class="row" style="padding:0em; margin-top: 3vh;">
<ng-container>    
    <input type="file" accept=".mp4,.mkv"id="file" multiple (change)="getFileDetails($event)">    
    <button class="btn btn-primary" (click)="uploadFiles()">Upload Video</button>    
    
</ng-container>

 myFiles=[]

    getFileDetails(e) {         
    //console.log (e.target.files);   
    this.myFiles=[]   
    for (var i = 0; i < e.target.files.length; i  ) {      
      this.myFiles.push(e.target.files[i]);      
    }         
  }




 uploadFiles() 
  {      
    const frmData = new FormData();    
//you can enter other form fields here  
    for (var i = 0; i < this.myFiles.length; i  ) {  
      console.log(this.myFiles[i])    
      frmData.append("Upload", this.myFiles[i]);      
    }      
    
    this.http.post('http://localhost:3000/', frmData,{responseType: 'text',reportProgress:true,observe:'events' })
}