Question

我使用下面显示的设置读取angular2中的图像文件。我使用input元素显示选择文件的窗口，然后在选择文件时触发addThumbnail函数。点击input正由另一个按钮触发。我注意到addThumbnail函数的触发器有时会无声地失败，即在选择文件后甚至没有触发该函数。这种情况可能是5次中有1次我不确定是否会因文件大小而发生这种情况。我尝试通过在addThumbnail函数内设置断点来调试它，但这甚至没有被触发。

<div class="extra-image-container">
    <input type="file" accept="image/*" (change)="addThumbnail($event)" style="display:none;" #fileInput2/>
    <div class="thumbnail-button" (click)="fileInput2.click()">
        <span><i class="material-icons">photo_camera</i></span><br>
        <span>Extra Images</span>
    </div>
</div>

这是我使用的addThumbnail函数和文件阅读器功能。

addThumbnail(event) {
    console.log('adding thumbnail');
    var subscription = this.readImage(event.target).subscribe((result) => {
        this.thumbnails.push(result.imageUrl);
        this.editedThumbnails.push(result.imageUrl);
        subscription.unsubscribe()
    });
}

readImage(inputValue: any) : Observable<any> {
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader();
    var observable = new Observable(observer => {
        myReader.onloadend = (e) => {
            observer.next({imageUrl: myReader.result});
            console.log("image loaded");
            // var image = new Image();
            // image.addEventListener("load", () => {
            //     observer.next({
            //         imageWidth: image.width,
            //         imageHeight: image.height,
            //         imageSize: file.size/1000,
            //         imageUrl: myReader.result
            //     })
            //     console.log("image loaded");
            // })
            // image.src = myReader.result;
        }
        myReader.readAsDataURL(file);//triggers the callback
    })
    return observable
}

Answer 1

事实证明，如果您一个接一个地读取相同的文件，则不会触发def var = null因为文件相同。因此，为了解决这个问题，我必须做的就是在加载文件后将input元素的值设置为空字符串。

change

angular2 filereader神秘失败

1 个答案: