通过. put（）方法将文件（图像）上传到Firebase存储得到意外结果

提问者：小点点

通过. put（）方法将文件（图像）上传到Firebase存储得到意外结果

我是Firebase的新手，特别是Firebase存储。我正在尝试遵循[Firebase存储上传文件文档][1]。

当尝试上传文件（我尝试. jpg图像文件）从URL（获取URL

另一方面，当我手动上传上面相同的文件（. jpg图像文件）时-使用存储控制台中的上传文件按钮，存储控制台中此文件的大小为79.98 Kilobytes（KB），我可以在存储控制台预览并可以渲染到

现在是ProcessImage. js文件中.put（）方法的代码（我认为这个文件产生了问题）

import { useState } from "react";
import { storage } from "./firebaseConfig";
import "firebase/storage";

function ProcessImage() {
  const [imgURL, setImgURL] = useState("");
  
  // Create a storage reference from our storage service
  var storageRef = storage.ref();

  // Create a reference to feeds1_avata_icon.jpg
  var flagRef = storageRef.child("feeds1_avata_icon.jpg");

// After choose image, immediately put this image to Firebase-storage
  function loadImg(event) {
    // get file from input
    var file = URL.createObjectURL(event.target.files[0]);

    // put file to storage
    flagRef
      .put(file, {
        contentType: "image/jpeg",
      })
      .then((snapshot) => {
        console.log("Uploaded a blob or file!");
      });
  }

// if click button, render image from Firebase-storage to <img tag
  function handleDownload() {
    flagRef.getDownloadURL().then((url) => {
      setImgURL(url);
    });
  }

  return (
    <div>
      <input type="file" id="uploadFile" onChange={(e) => loadImg(e)} />
      <img src={imgURL} alt="" id="image" />
      <input type="button" value="Button" onClick={handleDownload} name="" />
    </div>
  );
}
export default ProcessImage;

接下来是我的fire baseConfig. js文件：

import firebase from "firebase/app";
import "firebase/firestore"; 
import 'firebase/auth'
import 'firebase/storage'

const firebaseConfig = {
  apiKey: "AIzaSyBU8gkh5H0NwfTTbZ-VQNaF8lAcdkyV31Y",
  authDomain: "facebook-clone-f4938.firebaseapp.com",
  projectId: "facebook-clone-f4938",
  storageBucket: "facebook-clone-f4938.appspot.com",
  messagingSenderId: "584659342846",
  appId: "1:584659342846:web:b1b19535364ca4f1e6dcaf",
  measurementId: "G-FQH967H0YJ",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const providers = new firebase.auth.GoogleAuthProvider();
var storage = firebaseApp.storage()
export { auth, providers, storage };
export default db;

关于pack. json中版本的一些信息：

"name": "facebook-clone-2.0",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@firebase/storage": "^0.9.4",
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.5.2",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^4.19.5",
    "firebase": "^8.10.1",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "react-with-firebase-auth": "^1.4.1",
    "web-vitals": "^2.1.4"

这个问题我得到时运行ReactJs应用程序在localhost.现在我卡住了，我不知道.感谢所有的帮助！[1]：https://firebase.google.com/docs/storage/web/upload-files?hl=en

共1个答案

匿名用户

您可以将File对象直接传递到put（）中，它将blob或ArrayBuffer作为第一个参数。无需为相同的对象创建URL。

flagRef.put(event.target.files[0])

您还应该检查用户是否真的选择了文件。尝试重构代码，如下所示：

function loadImg(event) {
  // get file from input
  const file = event.target.files[0];

  if (file) {
    // put file to storage
    flagRef
      .put(file, {
        contentType: "image/jpeg",
      })
      .then((snapshot) => {
        console.log("Uploaded a blob or file!");
      });
  } else {
    alert("Please select a file")
  }
}