在Firebase Cloud Storage中加载预览时出错 [英] Error loading Preview in Firebase Cloud Storage

问题描述

我已将图像上传到Cloud Storage，但是显示图像时遇到问题.在存储"概述中，加载预览时出现错误.

I've uploaded an image to Cloud Storage , but I'm having an issue with displaying an image. On the Storage overview, I'm getting Error loading preview.

当我将图像链接添加到Cloud Firestore中的对象时，我还不了解这一步骤，但是我不确定这是否仅是由于文件类型(HEIC，而是image/jpeg)或其他原因引起的我的代码有误:

I haven't got to the step when I add the image link to an object in Cloud Firestore, but I wasn't sure if this is just due to the file type (HEIC, but image/jpeg) or if something is wrong with my code:

存储概述:

图片(点击时):

显示问号.

图像响应(本机图像选择器):

 {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;

推荐答案

如果您在控制台中单击文件位置部分，是否可以看到访问令牌?如果不是这样，可能是因为您的文件不包含访问令牌" .

Can you see an Access token if you click the File location section there in your Console? If not, this could be an issue with the fact that your file does not contain an "Access token".

尝试在元数据中添加一个，看看它如何进行.

Try adding one in the metadata and see how it goes.

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

请参见，每当您使用Firebase控制台上传图像时，都会自动生成一个访问令牌.但是，如果您使用任何Admin SDK或gsutil上传图像，则需要自己手动生成此访问令牌.

See, whenever you upload an image using Firebase Console, an access token will be automatically generated. However, if you upload an image using any Admin SDK or gsutil you will need to manually generate this access token yourself.

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

This curious fact seems to affect the preview in the Firebase Console.

例如，我使用Admin SDK和控制台上传了同一张图片，这是结果.

For example, I uploaded the same image using the Admin SDK and the Console and here are the results.

使用Admin SDK进行上传(永久保存):

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

我知道此错误看起来有些不同，但可能是相关的.祝你好运！

I am aware that this error looks a little bit different but could be related. Good luck!

我在针对Python的问题中解决了该问题

I addressed this issue in this question for Python

这篇关于在Firebase Cloud Storage中加载预览时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！