问题

我正在更新 Firebase React.js 的 Firestore 和 Storage。

```javascript
import "firebase/compat/storage";
import firebase from "config.js";

const [image, setImage] = useState();

firebase
  .storage()
  .ref("images/" + image.name)
  .put(image)
  .then(({ ref }) => {
    ref.getDownloadURL().then((url) => {
      firebase.firestore().collection("images").doc().set({ imageURL: url });
    });
  });

return (
  <input
    type="file"
    name="profile"
    onChange={() => setImage(event.target.files[0])}
  />
);

我们可以以其他方式编写这段代码吗？我的意思是，我能去掉重复的 firebase. 吗？

<details>
<summary>英文:</summary>

I am updating firestore and Storage of Firebase React.js .

import "firebase/compat/storage";
import firebase from "config.js";

const [image, setImage] = useState();

firebase
.storage()
.ref("images/" + image.name)
.put(image)
.then(({ ref }) => {
ref.getDownloadURL().then((url) => {
firebase.firestore().collection("images").doc().set({ imageURL: url });
});
});

return (
<input
type="file"
name="profile"
onChange={() => setImage(event.target.files[0])}
/>
);

can we write this code to any other way. I mean, can I remove the repeating `firebase.` ?

</details>


# 答案1
**得分**: 1

I think you can use below code.I have tried the below example which uploads an image and returns the downloadURL and stores it in a Firestore document.I have used Firebase modular sdk v9, You can try the code below. It is in typescript you may change it to javascript if required.

```javascript
import { addDoc, collection } from "firebase/firestore";
import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import { useState } from "react";
import { db, storage } from "./config/firebase";

export default function App() {
  let downloadURL:string;
  const upload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = event.target.files as FileList;
    const dop = ref(storage, `${selectedFiles?.[0].name}`);
    const data = await uploadBytes(dop, selectedFiles?.[0]);
    downloadURL = await getDownloadURL(data.ref);
    console.log(downloadURL);
    const firestoreRef = collection(db, "images");
    const result = await addDoc(firestoreRef, {
      imageUrl: downloadURL
    });
    console.log(result);
  }
  return (
    <input
    type="file"
    name="profile"
    onChange={upload}
  />
  )
}

Also I can see you are using a deprecated version of Firebase Storage you can use the latest version which solves the multiple Firebase issues.

You can try using React Firebase Hooks which provides convenience listeners for files stored within Firebase Cloud Storage.

import { addDoc, collection } from "firebase/firestore";
import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import { useState } from "react";
import { db, storage } from "./config/firebase";

export default function App() {
  let downloadURL:string;
  const upload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = event.target.files as FileList;
    const dop = ref(storage, `${selectedFiles?.[0].name}`);
    const data = await uploadBytes(dop, selectedFiles?.[0]);
    downloadURL = await getDownloadURL(data.ref);
    console.log(downloadURL);
    const firestoreRef = collection(db, "images");
    const result = await addDoc(firestoreRef, {
      imageUrl: downloadURL
    });
    console.log(result);
  }
  return (
    <input
    type="file"
    name="profile"
    onChange={upload}
  />
  )
}