Question

角度2中的图片上传问题：

我们将使用angular 2将图像作为'blob data'上传到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);

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

为您的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。

希望这能解决你的问题！

角度2中的图像上传问题：

1 个答案: