How to store an image with react- query - firebase ?

在使用 react-query 结合 Firebase 来存储图像时，我们首先需要确保已经设置好 Firebase 存储服务，并且在项目中安装并设置完成 react-query 和 firebase 相关库。

第一步：设置 Firebase

1. 在 Firebase 控制台中创建一个新项目。

2. 启用 Firebase 存储服务。

3. 安装 Firebase SDK 并在项目中进行配置。

   bash
   npm install firebase

   在项目中创建一个 firebaseConfig.js 文件：

   javascript
   import { initializeApp } from "firebase/app";
   import { getStorage } from "firebase/storage";
   
   const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
   };
   
   const app = initializeApp(firebaseConfig);
   export const storage = getStorage(app);

第二步：使用 react-query 和 Firebase 存储上传图像

1. 安装 react-query：

   bash
   npm install react-query

2. 创建一个用于上传图像的自定义 hook 使用 react-query 的 useMutation。这个 hook 将处理图像上传的逻辑。

   javascript
   import { useMutation } from 'react-query';
   import { ref, uploadBytes } from 'firebase/storage';
   import { storage } from './firebaseConfig'; // 引入Firebase配置
   
   const useUploadImage = () => {
       return useMutation(async (file) => {
           // 创建一个在 Firebase 存储中的引用
           const storageRef = ref(storage, `images/${file.name}`);
           // 将文件上传到指定引用
           const snapshot = await uploadBytes(storageRef, file);
           return snapshot;
       });
   };

第三步：在组件中使用自定义 hook

在 React 组件中，可以使用 useUploadImage hook 来上传图片。

javascript
import React, { useState } from 'react';
import { useUploadImage } from './hooks/useUploadImage'; // 引入我们创建的hook

function ImageUploadComponent() {
    const [file, setFile] = useState(null);
    const { mutate: uploadImage, isLoading, error } = useUploadImage();

    const handleFileChange = (event) => {
        setFile(event.target.files[0]);
    };

    const handleUpload = () => {
        uploadImage(file);
    };

    return (
        <div>
            <input type="file" onChange={handleFileChange} />
            {isLoading ? (
                <p>上传中...</p>
            ) : (
                <button onClick={handleUpload}>上传图片</button>
            )}
            {error && <p>上传错误: {error.message}</p>}
        </div>
    );
}

export default ImageUploadComponent;

总结

上面的步骤展示了如何结合使用 react-query 和 Firebase 存储服务来上传图像，通过这种方式，你可以有效地管理图像上传状态，例如加载状态和错误处理，同时保持组件的简洁和可维护性。