未处理的拒绝(TypeError):observer.complete.bind不是函数

Question

它最像instagram，当用户试图上传帖子时，我试图将图像上传到firebase，但上传完成后会出现此错误。

未处理的拒绝(TypeError(：observer.complete.bind不是函数

图像上传成功，但它没有在应用程序中显示(似乎问题出在firebase给你的链接上(

ImageUpload.js:

import { Button } from "@material-ui/core";
import React, { useState } from "react";
import { db, storage } from "../database/firebase";
import firebase from "firebase";
function ImageUpload({ nickname }) {
// States
const [caption, setCaption] = useState("");
const [image, setImage] = useState(null);
const [progress, setProgress] = useState(0);
// Handlers
const handleChange = (e) => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
}
};
const handleUpload = () => {
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {
// Progress function...
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
(error) => {
// Error function...
console.log(error);
},
// Complete function...
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then((url) => {
// Post image inside db
db.collection("posts").add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
caption: caption,
imageURL: url,
username: nickname,
});
setProgress(0);
setCaption("");
setImage(null);
})
);
};
return (
<div>
<progress value={progress} max="100" />
<input
type="text"
placeholder="Enter a caption..."
onChange={(event) => setCaption(event.target.value)}
value={caption}
/>
<input type="file" onChange={handleChange} />
<Button onClick={handleUpload}>Upload</Button>
</div>
);
}
export default ImageUpload;

Answer 1

对于您的"完整功能"；，您意外地从storageRef.ref("images").child(image.name).getDownloadURL()传入了Promise，而不是函数。

要修复它，请确保您通过更改来传递函数

// Complete function...
storage

至

// Complete function...
() => storage