通过 .put() 方法将文件(图像)上传到 firebase-storage 得到意想不到的结果

Question

我是Firebase的新手，特别是Firebase-storage。我正在尝试按照[Firebase存储上传文件文档][1]进行操作。

当尝试从URL上传文件(我尝试.jpg图像文件)时(从<输入标签和方法URL.createObjectURL(event.target.files[0])获取URL)使用.put()方法，Firebase存储已更新，但有一个问题：此图像的大小仅为9字节(B)，无法在存储中预览，也无法呈现为浏览器的>

另一方面，当我手动上传上面的相同文件(.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

可以将 File 对象直接传递到将 blob 或 ArrayBuffer 作为第一个参数的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")
}
}