我正在尝试按照教程将图像转换为Base64格式,当我从Angular 6项目上传图像时。当我点击提交按钮时,我可以获取输出值: "base64编码",并且我也可以通过使用“将您的Base64转换为图像”将代码转换为图像来获得相同的图像。
但是,在代码中,它显示“属性'split'在类型'string | ArrayBuffer'上不存在。类型'ArrayBuffer'上不存在属性'split'。”的错误并将split用红色下划线标出。我也尝试了类似的问题和答案。但这无法消除错误。
我的代码如下:
我的HTML代码是:
我的代码如下:
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'base64-upload',
templateUrl: './base64-upload.component.html'
})
export class Base64UploadComponent {
form: FormGroup;
loading: boolean = false;
@ViewChild('fileInput') fileInput: ElementRef;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.form = this.fb.group({
name: ['', Validators.required],
avatar: null
});
}
onFileChange(event) {
let reader = new FileReader();
if(event.target.files && event.target.files.length > 0) {
let file = event.target.files[0];
reader.readAsDataURL(file);
reader.onload = () => {
this.form.get('avatar').setValue({
filename: file.name,
filetype: file.type,
value: reader.result.split(',')[1]
})
};
}
}
onSubmit() {
const formModel = this.form.value;
this.loading = true;
// this.http.post('apiUrl', formModel)
setTimeout(() => {
console.log(formModel);
alert('done!');
this.loading = false;
}, 1000);
}
clearFile() {
this.form.get('avatar').setValue(null);
this.fileInput.nativeElement.value = '';
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Bob" formControlName="name">
</div>
<div class="form-group">
<label for="avatar">Avatar</label>
<input type="file" id="avatar" (change)="onFileChange($event)" #fileInput>
<button type="button" class="btn btn-sm btn-default" (click)="clearFile()">clear file</button>
</div>
<button type="submit" [disabled]="form.invalid || loading"
class="btn btn-success">Submit <i class="fa fa-spinner fa-spin fa-fw" *ngIf="loading"></i>
</button>
</form>