使用 React 将图像上传到 Firebase 9 存储？答案

【问题标题】：Upload image to Firebase 9 storage with React?使用 React 将图像上传到 Firebase 9 存储？
【发布时间】：2022-05-09 03:53:49
【问题描述】：

我正在尝试制作一个简单的输入按钮，用户可以单击该按钮以使用 React 将图像 (.png) 文件上传到 Firebase-Storage (v.9) （适用于未经身份验证的用户）。

这是组件：

import { useState } from 'react';
import { storage } from './firebase.config';

import { ref, uploadBytes } from 'firebase/storage';

console.log(storage); // getting the storage object

export default function Upload() {
    const [img, setImg] = useState(null);
    const [imgError, setImgError] = useState(null);

    // handle submit
    const handleSubmit = async e => {
        e.preventDefault();

        const uploadPath = `images/${img.name}`; // geting the image path

        const storageRef = ref(storage, uploadPath); // getting the storageRef

        uploadBytes(storageRef, img)
            .then(snapshot => console.log(snapshot))
            .catch(err => console.log(err.message));
    };

    // handle upload
    const handleUpload = e => {
        setImgError(null);

        let selected = e.target.files[0];

        if (!selected) {
            setImgError('Please select file');
            return;
        }

        if (!selected.type.includes('image')) {
            setImgError('Please select image file');
            return;
        }

        if (selected.size > 1000000) {
            setImgError('Please select smaller file size');
            return;
        }

        setImgError(null);
        setImg(selected);
    };

    return (
        <div>
            <h1>Upload component</h1>
            <form onSubmit={handleSubmit}>
                <label>
                    <span>Select image file</span>
                    <input type='file' onChange={handleUpload} required />
                </label>

                <button>Add to storage</button>
                {setImgError && <p>{imgError}</p>}
            </form>
        </div>
    );
}

这是 Firebase 配置文件。

import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {

    apiKey: 'here is the key',
    authDomain: 'here is the authDomain',
    projectId: 'here is the project ID',
    storageBucket: 'here is the storageBucket',
    messagingSenderId: 'here is the messagingSenderId',
    appId: 'here is appId',
};

// init App
const firebaseApp = initializeApp(firebaseConfig);

// init Storage
export const storage = getStorage(firebaseApp);

这里是 Firebase-Storage 规则文件。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

然而，它不起作用。我尝试用谷歌搜索错误消息，但可以找到解决方案。

Firebase 存储：发生未知错误，请检查错误负载以获取服务器响应。（存储/未知）错误的请求

我关注了这些文档：https://firebase.google.com/docs/storage/web/upload-files

【问题讨论】：

标签： javascript reactjs firebase firebase-storage

【解决方案1】：

今天有类似的事情。

我通过手动创建父文件夹解决了这个问题。在您的情况下，我建议您先创建 images 文件夹，然后重新运行代码。

祝你好运！

【讨论】：