Image Загрузить вопрос в угловом 2:

Question

Image Загрузить вопрос в угловом 2:

У нас есть проблема с загрузкой изображений в MySQL как «больших двоичных данных» с помощью углового 2.We не знаю, как разобрать изображение в сгустка данные

image.html:

<input type="file" class="fileinput btn-primary" name="file" id="file" formControlName="file" 
         title="Browse image" [(ngModel)]="student.file" (change)="onChange($event)" /> 

image.component.ts:

  file: File; 
      onChange(event: EventTarget) { 
      let eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
      let target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
      let files: FileList = target.files; 
      this.file = files[0]; 
      console.log(this.file); 

В Json

Student(
    name: string, 
    class:string, 
    file: any, 
    rollNo: number): Observable<any> { 
    let requestData = { 
     name: name, 
     class: class, 
     photo: { 
      data: file, 
      contentType: "multipart/form-data" 
     }, 
     rollNo: rollNo, 
    }; 
    return this.http.post(this.studentUrl, requestData) 
     .map(response => { 
      return response; 
     }); 
} 

Когда мы запустим этот код он показывает следующее сообщение об ошибке.

Исключение

"Caused by: org.hibernate.TransientPropertyValueException: object references an unsaved transient instance - save the transient instance before flushing 

Если какой-либо плагин или директивы для этого?

Answer 1

Я использовал ниже код, чтобы решить подобную проблему

Это мой файл элемент в COMPONENTNAME.component.html

<input type="file" (change)="fileChange($event)"> 

Создать функцию fileChange своим COMPONENT.component.ts

private fileChange(event: any) { 
    let reader = new FileReader(); 
    let imageBlob: any; 
    reader.onload = (fileReadEvent: any) => { 
     imageBlob = fileReadEvent.target.result; 
    }; 
    reader.readAsDataURL(event.target.files[0]); 
} 

при загрузке изображения он вызовет метод fileChange и метод readAsDataURL, и переменная imageBlob будет иметь изображение как blob.

Надеюсь, что это решит вашу проблему !!