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

Question

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

\n\n

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

\n\n

存储概述：

\n\n

\n\n

图片（点击时）：

\n\n

显示问号。

\n\n

\n\n

图像响应（react-native-image-picker）：

\n\n

 {height: 3024, origURL: "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC", fileName: null, data: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA\xe2\x80\xa6c4z+P04wa+twuG5Yq628/OR1QqSdtLLqrrTe32L79l63P/9k=", width: 4032, \xe2\x80\xa6}\nheight: 3024\norigURL: "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC"\nfileName: null\ndata: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA"\nwidth: 4032\ntype: "image/jpeg"\nfileSize: 13712705\nisVertical: false\nuri: "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"\n__proto__: Object\n

\n\n

代码：

\n\n

// Image URI\nconst imageURI = action.newRecipe.image.uri;\n\n// Image Type\nconst imageType = action.newRecipe.image.type;\n\n// Image Blob\nconst blob = new Blob([imageURI], {type : `${imageType}`});\nconsole.log(\'Adding Blob\');\nconsole.log(blob.data);\n\n// Firebase Cloud Storage File Path Ref (UUID Generates Randomized File Name)\nconst filePathRef = imagesRef.child(uuidv4());\n\n// Metadata\nconst metadata = {\n  contentType : `${imageType}`,\n};\n\n// Upload File\nconsole.log(\'Firebase: Uploading image\');\nconst uploadTask = reduxSagaFirebase.storage.uploadFile(filePathRef, blob, metadata);\n\n// Upload Task\nuploadTask.on(\'state_changed\', (snapshot) => {\n  // Progress\n  const progress = (snapshot.bytesTransferred * 100) / snapshot.totalBytes;\n  console.log(`Uploading Image: ${progress}%`);\n});\n\n// Wait For Upload To Complete\nyield uploadTask;\n

\n

Answer 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 上传（它会永远加载）：

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

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

我在Python的这个问题中解决了这个问题

Answer 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)
}