【问题标题】:How to get the resized downloadUrl after upload with firebase storage (Web SDK + Resize images extention)使用firebase存储上传后如何获取调整大小的downloadUrl(Web SDK +调整图像扩展)
【发布时间】:2020-03-17 12:32:17
【问题描述】:

使用 Firebase Web SDK,我可以在上传文件后轻松获取 downloadUrl

const task = firebase.ref().child('myFolder').put(file, metadata)
task.then(snapshot => {
 snapshot.ref.getDownloadURL()) 
}

但我安装了Resize Images Extention,现在,我想尽快获得调整大小的downloadUrl。怎么做 ?我没有找到任何解释...

【问题讨论】:

    标签: javascript firebase resize firebase-storage firebase-extensions


    【解决方案1】:

    扩展名根据您的配置方式确定性地确定新文件名。您可以在扩展程序的source code 中查看如何确定名称的确切代码。

    当您安装扩展程序时,它会要求提供与原始路径相关的调整大小图像的路径。那是新图像的路径(当然,相对于原始图像)。

    除此之外,documentation 声明它将以配置的宽度和高度作为后缀。

    使用与上传的原始图像相同的名称命名调整大小的图像,但后缀为您指定的宽度和高度。

    因此,如果您没有指定路径,而是指定了 200x200,然后将 image.jpg 上传到存储桶的根目录,则新名称将是:image_200x200.jpg,位于存储桶的根目录。

    如果您指定了路径resized,并且您指定了200x200,并将image2.jpg 上传到存储桶的根目录,则新名称将是/resized/image2_200x200.jpg,与源图像在同一个存储桶中。

    要获取下载 URL,您需要在扩展函数创建新文件后,在具有新名称的存储引用上调用 getDownloadURL

    如果你想等待,可以使用类似如下的代码进行轮询:

    function delay(t, v) {
      return new Promise(function(resolve) { 
        setTimeout(resolve.bind(null, v), t)
      });
    }
    
    function keepTrying(triesRemaining, storageRef) {
      if (triesRemaining < 0) {
        return Promise.reject('out of tries');
      }
    
      return storageRef.getDownloadURL().then((url) => {
        return url;
      }).catch((error) => {
        switch (error.code) {
          case 'storage/object-not-found':
            return delay(2000).then(() => {
              return keepTrying(triesRemaining - 1, storageRef)
            });
          default:
            console.log(error);
            return Promise.reject(error);
        }
      })
    }
    

    上传后你会这样称呼它:

    const storageRef = firebase.storage().ref().child('image_200x200.jpg');
    keepTrying(10, storageRef).then((url) => console.log(url));
    

    【讨论】:

    • 可能不是唯一的方法——例如另一个云功能可以查找由扩展创建的文件(例如,通过在目标路径上触发),然后触发对 RTDB 或 Firestore 的更新,或者发送云消息,或者其他什么,我想。这似乎是最直接的。
    • 最好的做法是将downloadUrl或引用存储在我的数据库中?
    • 存储路径名或gs:// url 对我来说似乎比存储下载 url 更自然,因为它可以更灵活地进行其他操作。
    • 非常感谢。不确定您的延迟函数在做什么,但我将其替换为: delay(t) { return new Promise(resolve => { setTimeout(resolve, t); });此外,如果您使用 AngularFire,它会返回一个 observable,因此您必须将其转换为一个 promise ".getDownloadURL().toPromise().then"。
    • 另一种方法是将firebase触发器放在存储上,然后在创建文件时将其写入firestore集合。您可以观看此集合以查看新文件何时出现,然后检查预期的文件名。虽然比这个解决方案要多得多。
    猜你喜欢
    • 2020-05-10
    • 2019-12-13
    • 1970-01-01
    • 2022-08-18
    • 2020-07-04
    • 2021-11-15
    • 2013-09-13
    • 2018-01-28
    • 2023-04-04
    相关资源
    最近更新 更多