在 Firebase Cloud Storage 中加载预览时出错答案

【问题标题】：Error loading Preview in Firebase Cloud Storage在 Firebase Cloud Storage 中加载预览时出错
【发布时间】：2020-03-19 01:04:42
【问题描述】：

我已将图片上传到 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;

【问题讨论】：

如果您在 Firebase 控制台中看到未提供解释的错误，请联系 Firebase 支持并详细说明如何重现该问题。 support.google.com/firebase/contact/support
尝试使用其他网络访问。有时互联网提供商会出现问题。
@jefelewis 你能分享你的解决方案吗？
@Byusa 老实说，这些图像是我为 Firebase 做的最后的痛苦，我最终切换到 AWS (AWS Amplify)
@jefelewis 我能感觉到你。在下面用“blob”检查我的解决方案，它修复了它。

标签： firebase google-cloud-firestore google-cloud-storage firebase-storage

【解决方案1】：

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

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

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

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

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

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

使用 Admin SDK 上传（它会一直加载）：

使用控制台上传（在文件位置部分有访问令牌）

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

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

【讨论】：

但是，问题中的代码没有使用管理 SDK。它使用的是客户端 SDK，应该可以正常工作。当您使用 Admin SDK 时，预览根本不会显示。您在此处的问题中看到的是一条错误消息。
我正在生成一个访问令牌，但不确定它的作用（并且能够撤销）+ 存储位置。仍在学习 Firebase 存储。
我设法让它按照您的回答与stackoverflow.com/a/43764656/3118542 结合使用； metadata 内的嵌套 metadata 发挥了重要作用。
与此相关的 Github 问题：github.com/firebase/firebase-admin-node/issues/156
@ToineHeuvelmans 你能分享你的解决方案吗？

【解决方案2】：

这就是我能够修复它的方法：把你的文件变成blob，它会被修复，检查下面的代码：

const uploadImage = async () => {
    const response = await fetch(file.uri)
    const blob = await response.blob();
    var ref = firebase.storage().ref().child("FolderName");
    return ref.put(blob)
}

【讨论】：

【解决方案3】：

你可以试试这个。

let newImageUri

try {
  const response = await fetch(imageUrl)
  const blob = await response.blob()
  await firebase.storage().ref().child(fileName).put(blob)
  var ref = firebase.storage().ref().child(fileName).put(blob)
  newImageUri = await ref.snapshot.ref.getDownloadURL()
    
} catch (error) {
    console.log(error)
    
}

【讨论】：