我正在尝试将离子android应用中的图像上传到Firebase存储。我正在关注本教程： File Upload from Ionic App to Firebase Cloud Storage
但是，当我尝试上传图片时收到此错误：
ERROR错误：未捕获（承诺）：[object Object]
我想 readAsArrayBuffer 存在问题。我已按照步骤File.readAsArrayBuffer promise never resolves编辑index.html。我将polyfills.js脚本标记移动到cordova.js标记之前。
但是我仍然收到错误消息。
这是完整的错误消息：
ERROR Error: Uncaught (in promise): [object Object]
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:1)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireStorage } from '@angular/fire/storage';
import { FileChooser } from '@ionic-native/file-chooser';
import { File } from '@ionic-native/file';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(private storage: AngularFireStorage,
private fileChooser: FileChooser, private file: File,
public navCtrl: NavController) {
}
choose(){
this.fileChooser.open().then((uri)=>{
alert(uri);
this.file.resolveLocalFilesystemUrl(uri).then((newUrl)=>{
console.log('checkpoint0');
alert(JSON.stringify(newUrl));
console.log('checkpoint1');
let dirPath = newUrl.nativeURL;
let dirPathSegments = dirPath.split('/')
console.log('checkpoint2');
dirPathSegments.pop()
console.log('checkpoint3');
dirPath = dirPathSegments.join('/')
console.log('checkpoint4');
this.file.readAsArrayBuffer(dirPath, newUrl.name).then(async (buffer)=>{
console.log('checkpoint5');
await this.upload(buffer, newUrl.name);
console.log('checkpoint6');
})
})
})
}
async upload(buffer, name){
let blob = new Blob([buffer], { type: "image/jpeg"});
console.log('upload in progress');
/*this.storage.ref('images/' + name).put(blob).then((d)=>{
alert("Done");
}).catch((error)=>{
alert(JSON.stringify(error))
})*/
this.storage.upload('images/' + name, blob).then((d)=>{
alert("Done");
console.log('upload is done');
}).catch((error)=>{
alert(JSON.stringify(error))
})
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="choose()">Upload Image</button>
</ion-content>
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
package.json
{
"name": "UploadImage",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/fire": "^5.1.0",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "~4.15.0",
"@ionic-native/file": "^4.17.0",
"@ionic-native/file-chooser": "^4.17.0",
"@ionic-native/splash-screen": "~4.15.0",
"@ionic-native/status-bar": "~4.15.0",
"@ionic/pro": "2.0.3",
"@ionic/storage": "2.2.0",
"cordova-android": "7.1.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "6.0.1",
"cordova-plugin-filechooser": "1.0.1",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^5.5.7",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.0",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-filechooser": {},
"cordova-plugin-file": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
非常感谢您的帮助。