如何在上传到 Firebase 之前调整图像大小？答案

【问题标题】：How can I resize an image before to upload to firebase?如何在上传到 Firebase 之前调整图像大小？
【发布时间】：2021-11-14 15:54:39
【问题描述】：

我有文件要从reactjs 上传到firebase。这些文件是这样的：它们有很多属性：

[File {path: 'image1.jpg', index: 0, fName: 'imageBall1.jpg', type: 'jpg', …},
 File {path: 'image2.jpg', index: 1, fName: 'imageBall2.jpg', type: 'jpg', …}]

我想在上传之前调整大小，所以我做了这个代码

export const resizeFile = async imageFiles => {
  return await imageFiles.map(async file => {
    const a =  await new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      300,
      300,
      "JPEG",
      100,
      0,
      (uri) => {
        resolve(uri);
      },
      "base64"
    );
    });
    console.log('file', file, a)
    return a
  })
}

但我得到了这个结果：

Blob data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAAB

我无法上传到firebase，如何调整图片大小以上传到firebase？还是我应该再次将该二进制文件转换为图像？

我宁愿上传图片而不是二进制文件

【问题讨论】：

标签： reactjs firebase blob

【解决方案1】：

您可以删除 base64 字符串中的 data:image/jpeg;base64,。然后你使用 .putString(image, 'base64', {contentType:'image/jpg'}); 上传到 Firebase。

确保您有 {contentType:'image/jpg'} 让 firebase 知道文件类型。

您可以在此处了解更多信息。 https://firebase.google.com/docs/storage/web/upload-files#upload_from_a_string

【讨论】：

如何再次将该二进制文件转换为图像？
@brunodia 你像这样再次附加它。 <img src="data:image/jpeg;base64,uploaded_base64_string_into_firebase"/>
@Tartarius 我可以在上传之前转换成图片吗？
@brunodia 基本上，你不能在 reactjs/browser/frontend 上做到这一点。如果您仍想再次将 base64 字符串转换为图像文件，则应在将其上传到 firebase 之前在服务器/后端执行此操作。
我为减小图像大小所做的压缩可以吗？有没有更好的方法可以在不转换为二进制文件的情况下做到这一点？

【解决方案2】：

您拥有的是 jpg 的 base-64 编码二进制表示。这通常可以发送到服务器。像所有文件一样，图像文件只是具有某些文件名或特殊标头的二进制文件，这些标头表明消费应用程序应该如何使用它们。许多应用程序，包括 Web 浏览器，都可以使用 base-64 编码的图像。见here for an example of how to render a base-64 string as an image。我相信如果您在 firebase 中存储一个内容为 base-64 字符串的新文件，您将能够像使用任何其他图像一样使用生成的文件。 Firebase 甚至有 an example 在 their documentation 中上传 base-64 字符串。

【讨论】：

如何再次将该二进制文件转换为图像？上传之前