当前位置: 首页 > 知识库问答 >
问题:

Firebase存储-图像预览正在频繁加载

尉迟鸿熙
2023-03-14

我最近开始使用firebase存储和firebase函数。现在我一直在开发从函数到存储的文件上传。

我已经开始工作了(上传完成,文件出现在存储部分),但是,图像永远保持这样(永远在右侧加载):

我以为这是我代码中的一个错误。然而,如果我打开谷歌云平台-存储,图像就会出现,我可以打开它并预览它。

我做错了什么?下面是我使用的代码:

function uploadImage() {
    const newImageData = "data:image/png;base64,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"

    var mimeTypes = require('mimetypes');
    var image = newImageData,
        mimeType = image.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/)![1],
        fileName = 'test.' + mimeTypes.detectExtension(mimeType),
        base64EncodedImageString = image.replace(/^data:image\/\w+;base64,/, ''),
        imageBuffer = new Buffer(base64EncodedImageString, 'base64');

    // Instantiate the GCP Storage instance
    const { Storage } = require('@google-cloud/storage');
    const googleCloudStorage = new Storage(firebaseSettings);
    const bucket = googleCloudStorage.bucket('projectID.appspot.com');


    var file = bucket.file(fileName);
    return file.save(imageBuffer, {
        metadata: { contentType: mimeType, cacheControl: "public, max-age=300" },
        public: true,
        validation: 'md5'
    }, function (error: any) {

        if (error) {
            throw 'error';
        }

        return "https://storage.googleapis.com/share-expanses-dcc9f.appspot.com/" + fileName;
    });
}

谢谢你的帮助

共有1个答案

邹麻雀
2023-03-14

我还没能测试Firebase给出的解决方案,但以下是回应的文字记录:

你面临的问题可能是因为两个原因。第一个问题是如何通过Firebase控制台、使用任何管理SDK或通过gsutil命令上传文件。如果使用Admin SDK选项,问题是一个已知的问题,其中所需的元数据不存在,幸运的是有一个解决方法,您可以尝试这个脚本来解决这个问题。

现在,第二个问题与网络有关如果您正在使用康卡斯特,请在另一个网络上试试,看看这个问题是否与网络有关。

 类似资料:
  • 以下是我的上传代码: 编辑:我将base64字符串复制到一个在线转换器中,看起来不错,它返回了正确的图像。看起来,数据没有问题。firebase的处理方式有问题。 编辑:我尝试显式地将类型设置为image/jpeg而不是image/jpg,如下所述:当Firestorage关闭时显示图像的正确方式,或者在Firestorage for iOS中加载预览时出错,但没有区别。

  • ,而当我上传相同的文件从上传文件选项从firebase UI然后它是预览罚款。Pls帮助我解决这个问题。

  • 我想从Firebase存储中播放视频,其中包含我正在尝试的视频视图,如下所示: 但它不会播放。视频是空的。

  • 我试图在Firebase存储中使用Firebase上传图像,但文件不能完全上传。它只显示图像的大小9字节,下载时无法预览。 这是我使用的代码:- 我使用的反应本地图像作物选择器。我使用Firebase,但不是反应本机Firebase。请帮助!

  • 我正在开发一款用于拍照的Android应用程序。首先,用户拍摄个人资料图片。此图像的Url保存在Firebase实时数据库中。用于检索以下下载URL的示例代码 这个url被保存在数据库中的多个地方,我需要在那里加载用户的个人资料图片——他的每个帖子的条目,他给应用程序上其他人的消息,等等。 现在,如果他以后更改个人资料图片,我有以下两个选项 更新每个数据库条目-非常繁琐、暴力和资源密集 那么,有没

  • 在我的应用中,我提示用户捕获图像。用户相机活动在按钮单击时开始,用户可以选择使用相机捕获图像。 此图像保存在用户手机上。然后将图像上传到firebase Storage,一切正常。来自一位使用三星Note 8的用户的反馈是,当图像以肖像模式拍摄时,他稍后会在应用程序中以风景模式显示。 我查看了firebase存储,发现图像以横向模式保存在存储中,即使用户以纵向模式捕获图像。 我想我必须将元数据传递