firebase - 在 Firebase 云存储中加载预览时出错

Question

我已将图像上传到 Cloud Storage ，但在显示图像时遇到问题。在存储概览中，我收到错误加载预览。

当我将图像链接添加到 Cloud Firestore 中的对象时，我还没有完成这一步，但我不确定这是否只是由于文件类型(HEIC，但图像/jpeg)或其他原因我的代码有问题:

存储概述:

图片(点击时):

显示问号。

图像响应(react-native-image-picker):

 {height: 3024, origURL: "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC", fileName: null, data: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA…c4z+P04wa+twuG5Yq628/OR1QqSdtLLqrrTe32L79l63P/9k=", width: 4032, …}
height: 3024
origURL: "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC"
fileName: null
data: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA"
width: 4032
type: "image/jpeg"
fileSize: 13712705
isVertical: false
uri: "file:///Users/jefflewis/Library/Developer/CoreSimulator/Devices/6B2E3DBA-217F-46B5-AAF2-C1AA540B408E/data/Containers/Data/Application/4CD01B23-6649-4222-BF0E-CB5959732A3E/Documents/images/BECF69B3-9AFF-4CBB-9648-331EF623271C.jpg"
__proto__: Object

代码:

// Image URI
const imageURI = action.newRecipe.image.uri;

// Image Type
const imageType = action.newRecipe.image.type;

// Image Blob
const blob = new Blob([imageURI], {type : `${imageType}`});
console.log('Adding Blob');
console.log(blob.data);

// Firebase Cloud Storage File Path Ref (UUID Generates Randomized File Name)
const filePathRef = imagesRef.child(uuidv4());

// Metadata
const metadata = {
  contentType : `${imageType}`,
};

// Upload File
console.log('Firebase: Uploading image');
const uploadTask = reduxSagaFirebase.storage.uploadFile(filePathRef, blob, metadata);

// Upload Task
uploadTask.on('state_changed', (snapshot) => {
  // Progress
  const progress = (snapshot.bytesTransferred * 100) / snapshot.totalBytes;
  console.log(`Uploading Image: ${progress}%`);
});

// Wait For Upload To Complete
yield uploadTask;

Answer 1

如果您在控制台中单击文件位置部分，是否可以看到访问 token ？如果不是，这可能是因为您的文件不包含“访问 token ”。

尝试在元数据中添加一个，看看效果如何。

const metadata  = {
  contentType : `${imageType}`,
  firebaseStorageDownloadTokens: uuidv4() //In this line you are adding the access token
};

请注意，无论何时您使用 Firebase 控制台上传图片，都会自动生成一个访问 token 。但是，如果您使用任何 Admin SDK 或 gsutil 上传图片，您将需要自己手动生成此访问 token 。

这个奇怪的事实似乎影响了 Firebase 控制台中的预览。

例如，我使用 Admin SDK 和控制台上传了相同的图像，结果如下。

使用 Admin SDK 上传(它会一直加载):

使用控制台上传(在文件位置部分有访问 token )

我知道这个错误看起来有点不同，但可能是相关的。祝你好运!

我在 this question for Python 中解决了这个问题