Javascript HTML5上传文件

我使用的是爱奥尼亚2，并且已经创建了一个应用程序，可以使用Cordova插件上传图像。这在iOS和Android上运行得非常好

我还想将上传功能添加到web浏览器，但我无法访问Cordova插件。所以我认为最好的方法是使用HTML5：

<input *ngIf="!isCordova" id="file" type="file" accept="image/*">

这确实获得了所选文件的句柄，但我似乎无法获得

imageURI

File {name: "SA 02 041.jpg", lastModified: 1227564968000, lastModifiedDate: Tue Nov 25 2008 00:16:08 GMT+0200 (SAST), webkitRelativePath: "", size: 902809…}
lastModified
:
1227564968000
lastModifiedDate
:
Tue Nov 25 2008 00:16:08 GMT+0200 (SAST)
name
:
"SA 02 041.jpg"
size
:
902809
type
:
"image/jpeg"
webkitRelativePath
:
""
__proto__
:
File

---

我觉得我在做一些根本错误的事情。感谢您的建议。

以下是一个有效的示例：

ionViewDidEnter() {
    this.myInput = document.getElementById('file');
    let that = this;
    this.myInput.addEventListener('change', function (evt) {
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    console.log(theFile);
                    console.log(e.target.result);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }, false);
}

File {name: "SA 02 041.jpg", lastModified: 1227564968000, lastModifiedDate: Tue Nov 25 2008 00:16:08 GMT+0200 (SAST), webkitRelativePath: "", size: 902809…}
lastModified
:
1227564968000
lastModifiedDate
:
Tue Nov 25 2008 00:16:08 GMT+0200 (SAST)
name
:
"SA 02 041.jpg"
size
:
902809
type
:
"image/jpeg"
webkitRelativePath
:
""
__proto__
:
File

ionViewDidEnter() {
    this.myInput = document.getElementById('file');
    let that = this;
    this.myInput.addEventListener('change', function (evt) {
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    console.log(theFile);
                    console.log(e.target.result);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }, false);
}