简体   繁体   English

如何使用 Admin SDK 从 Node.js 将文件类型的图像上传到 Firebase 存储

[英]How to upload an image of File type to Firebase Storage from Node.js with the Admin SDK

I have Angular running on the FrontEnd and Firebase Admin SDK for Node.js on the BackEnd.我在前端运行 Angular,后端运行 Node.js 的 Firebase Admin SDK。
What I want to achieve is to allow the user to select an image from his computer, using a simple <input> of type file .我想要实现的是允许用户使用类型为file的简单<input>从他的计算机中选择图像。 When I receive the user image which is of type File on the Angular side, I want to send this to my Node.js server and let him upload it to the Firebase Storage.当我在 Angular 端收到File类型的用户图像时,我想将其发送到我的 Node.js 服务器并让他将其上传到 Firebase 存储。
Here's how I'm sending the image to Node.js:这是我将图像发送到 Node.js 的方式:

  method(imageInput): void {
    const image: File = imageInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event: any) => {
      const imageData = {
        source: event.target.result,
        file: image
      }

      this.myService.uploadImage(imageData.file).subscribe(
        (res) => {
          // image sent successfully 
        },
        (err) => {
           // error
        })
    });

    reader.readAsDataURL(image);
  }

So on the Node.js side I don't see a way to upload this image.所以在 Node.js 方面,我没有看到上传这张图片的方法。
I'm trying:我想:

      admin.storage().bucket().upload(imageFromAngular, { --> Here's the problem
        destination: "someDestination/",
        contentType: "image/png",
        metadata: {
          contentType: "image/png"
        }
    }).then(() => { 
        // send successful response
    }).catch(err => {
       // send error response
    });

The issue comes from the fact that the upload method only takes as a parameter the path to the image and the options.问题来自于upload方法仅将图像路径和选项作为参数的事实。 However in this case I can't pass the path to the image, rather I can pass the image itself.但是,在这种情况下,我无法将路径传递给图像,而是可以传递图像本身。 I read this - https://googleapis.dev/nodejs/storage/latest/ but I couldn't find anything that would suit my needs.我读了这个 - https://googleapis.dev/nodejs/storage/latest/但我找不到任何适合我需要的东西。

What would be the correct way to do this ?这样做的正确方法是什么?

Update:更新:

Here's a more detailed explanation to the approach I took:这是对我采用的方法的更详细的解释:

I'm using the arrayBuffer method of the image File inside my method .我在我的方法中使用image文件的arrayBuffer method This method returns a promise of type ArrayBuffer.此方法返回 ArrayBuffer 类型的承诺。 I get the value and send it to my Server.我获取值并将其发送到我的服务器。
The Server uses Buffer.from(ArrayBuffer, 'base64') to convert the data and then I can safely use the save API ( https://googleapis.dev/nodejs/storage/latest/File.html#save ).服务器使用Buffer.from(ArrayBuffer, 'base64')转换数据,然后我可以安全地使用save API ( https://googleapis.dev/nodejs/storage/latest/File.html#save )。

To get the image later on I use download - (https://googleapis.dev/nodejs/storage/latest/File.html#download ).为了稍后获取图像,我使用download - (https://googleapis.dev/nodejs/storage/latest/File.html#download )。

You can write a byte stream (or a Buffer ) to Cloud Storage.您可以将字节流(或Buffer )写入 Cloud Storage。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM