javascript - 无法上传文件并将其转换为 base64string

Question

我正在尝试上传文件，然后将其转换为 base64 字符串并添加到对象。但它似乎没有工作。console.log() 每次显示空对象

<input type="file" (change)="onChange($event)" accept="image/jpeg, image/png" />
<input type="submit" value="send" (click)="upload()" />

功能:

onChange(fileInput: any) {
    let image: any = fileInput.target.files[0];
    let reader: FileReader = new FileReader();

    reader.onload = () => {
        reader.readAsDataURL(image);

        let photo: AddPhoto = new AddPhoto();
        photo.base64Image = reader.result;
        this.product.photos = [];
        this.product.photos.push(photo);
    };
}

upload() {
    console.log(this.product);
}

Answer 1

有一件事是，只有当文件被 reader.readAsDataURL() 成功加载时，reader.onload 才会被调用。这里按道理不应该写在reader.onload里面。将 readAsDataURL 置于 onload 函数之外，使其保留在 onChange 函数内。然后它应该工作。您的代码应如下所示。

    onChange(fileInput: any) {
        let image: any = fileInput.target.files[0];
        let reader: FileReader = new FileReader();


        reader.onload = () => {
            let photo: AddPhoto = new AddPhoto();
            photo.base64Image = reader.result;
            this.product.photos = [];
            this.product.photos.push(photo);
        };
        reader.readAsDataURL(image);

    }