Блог

Главная - Вопросы по программированию - Ошибка при попытке загрузить изображения в хранилище Firebase

Ошибка при попытке загрузить изображения в хранилище Firebase

#javascript #reactjs #firebase #google-cloud-firestore #firebase-storage

#javascript #reactjs #firebase #google-облако-firestore #firebase-хранилище

Вопрос:

Я пытаюсь создать приложение, которое позволит пользователю загружать изображение и отображать его на странице с помощью React и Firebase.

это часть кода, ответственная за проблему: переменная image поступает из состояния

 const [image, setImage] = useState("");
const [caption, setCaption] = useState("");
const [progress, setProgress] = useState(0)

function handleChange (e){
    if  (e.target.files[0]){
        setImage(e.target.files[0]);
    }
}
function handleUpload(){
    const uploadTask =  storage.ref('images/${image.name}').put(image)
    uploadTask.on(
        "state_changed",
        (snapshot) => {
            const progress = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) *  100
             );
            setProgress(progress);

           },
           (error) => {
            console.log(error);
            alert(error.message);
            },
            () => {
                storage
                .ref("images")
                .child(image.name)
                .getDownloadURL()
                .then(url => {
                    db.collection("posts").add({
                        timestamp: db.FieldValue.serverTimestamp(),
                        caption : caption,
                        imgUrl: url,
                        userName: username
                    })
                            setProgress(0);
                            setCaption("");
                            setImage(null);
                })
            }

        )
  
}

и эта ошибка регистрируется в консоли :

 Uncaught 

FirebaseStorageError {code_: "storage/invalid-argument", message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", serverResponse_: null, name_: "FirebaseError"}code_: "storage/invalid-argument"message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File."name_: "FirebaseError"serverResponse_: nullcode: (...)message: (...)name: (...)serverResponse: (...)__proto__: Object
    rethrowCaughtError @ react-dom.development.js:328
    runEventsInBatch @ react-dom.development.js:3336
    runExtractedPluginEventsInBatch @ react-dom.development.js:3537
    handleTopLevel @ react-dom.development.js:3581
    batchedEventUpdates$1 @ react-dom.development.js:21729
    batchedEventUpdates @ react-dom.development.js:798
    dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3591
    attemptToDispatchEvent @ react-dom.development.js:4311
    dispatchEvent @ react-dom.development.js:4232
    unstable_runWithPriority @ scheduler.development.js:659
    runWithPriority$1 @ react-dom.development.js:11077
    discreteUpdates$1 @ react-dom.development.js:21746
    discreteUpdates @ react-dom.development.js:811
    dispatchDiscreteEvent @ react-dom.development.js:4211

Я пытался изменить put(image) на put(blob) , но это не сработало

Комментарии:

1. Ошибка заключается в том, что вы жалуетесь на то, что вы передаете put() , но мы не можем видеть, что есть. Все, что мы знаем, это то, что вы используете переменную с именем image . Пожалуйста, отредактируйте вопрос, чтобы было более ясно, что происходит, и что вы ожидаете, что произойдет вместо этой ошибки.

2. Хорошо, мой со-разработчик отредактировал это, теперь понятно?

3. Не совсем. По-прежнему нет объяснения того, что такое image переменная или что вы ожидаете от этого кода, кроме создания этой ошибки.

4. Я добавил необходимые сведения, переменная image поступает из состояния

Ответ №1:

  1. Линия:
 const uploadTask =  storage.ref('images/${image.name}').put(image)

Имеет ошибку, он должен использовать символ ` (обратная кавычка / backtick) вместо использования одинарных кавычек ' :

 const uploadTask =  storage.ref(`images/${image.name}`).put(image)

в противном случае вы создадите ссылку на строку литерала images/${image.name} вместо image/value_of_variable_image.jpg подробнее о литералах шаблона можно найти здесь

  1. Вы все еще не показали нам содержимое image переменной, я вижу из кода, что вы вызываете setState внутри функции, которая выглядит как обратный вызов, но я не вижу, откуда вы вызываете, вы можете сделать это с помощью ввода, подобного этому:
 <input type="file" onChange={handleChange} />

Если вы уже используете его таким образом, я рекомендую добавить console.log(image) вне функции, чтобы отладить содержимое переменной перед отправкой в put() . Просто в качестве ссылки вывод из console.log(image) должен быть экземпляром File javascript API