角度2中的圖片上傳問題：

Question

角度2中的圖片上傳問題：

我們使用angular 2將圖像作為“ blob數據”上傳到mysql中時遇到問題。我們不知道如何將圖像解析為blob數據

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);

在傑森

   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)">

為您的COMPONENT.component.ts創建fileChange函數

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。

希望這能解決您的問題！