Question

我想上传一张图片并以角度4创建它的预览模板如下：

<script>    
    function getArea(){
        var circle = document.getElementById("rCircle"),
        circleArea = document.getElementById("circleArea");
        radius = parseInt(circle.value);
        var circleResult = Math.PI * Math.pow(radius, 2);
        circleArea.innerHTML = ("The area is: " + circleResult)
    };
</script>

我想在选择文件时调用函数<div> <input type="file" (onchange)="handleUpload($event)"> <img [src]="Logo" > </div。此函数将变量handleUpload()的值设置为所选文件的路径。我无法获取路径，因为未调用函数Logo。
组件类如下：

handleUpload($event)

我不明白我的代码有什么问题。 Demo

Answer 1

在角度你写的javascript事件没有＆＃34; on＆＃34;后缀。

变化：

<input type="file" (onchange)="handleUpload($event)">

要：

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

Answer 2

显示预览图像 - 示例代码

<input type="file" (change)="showPreviewImage($event)">
<img [src]="localUrl" *ngIf="localUrl" class="imgPlaceholder">



 localUrl: any[];
    showPreviewImage(event: any) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }

Demo and more info

如何从角度4的文件上传输入获取路径

2 个答案: