通过 .put() 方法将文件（图像）上传到 firebase-storage 得到意外结果

Question

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

当尝试从 URL 上传文件（我尝试 .jpg 图像文件）时（从的 2 张图像

另一方面，当我手动上传上面相同的文件（.jpg 图像文件）时 - 使用存储控制台中的上传文件按钮，存储控制台中此文件的大小为 79.98 千字节 (KB)，我可以预览在存储控制台中，也可以使用 [.getDownloadURL()][2] 方法渲染到

现在是 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;

接下来是我的 firebaseConfig.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;

关于package.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 应用程序时遇到的。现在我卡住了，我不知道。感谢所有帮助！ [1]: https://firebase.google.com/docs/storage/web/upload-files?hl=en&authuser=0 [2]: https://firebase.google.com/docs/storage/web/download-files?hl=en&authuser=0 [3]: https://i.stack.imgur.com/2cCU6.jpg [4]: https://i.stack.imgur.com/PDOXa.jpg [5]: https://i.stack.imgur.com/FJDve.jpg [6]: https://i.stack.imgur.com/GKJXv.jpg

Answer 1

您可以传递以 blob 或 ArrayBuffer 作为第一个参数的 File object directly into put()。无需为此创建对象 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")
  }
}

通过 .put() 方法将文件（图像）上传到 firebase-storage 得到意外结果

Upload file (image) by .put() method to firebase-storage get unexpected result

frontend

firebase

reactjs

firebase-storage

google-cloud-firestore