[英]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 ?这样做的正确方法是什么?
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。
createWriteStream()
API for streaming data to Cloud Storage: https://googleapis.dev/nodejs/storage/latest/File.html#createWriteStreamcreateWriteStream()
API: https : createWriteStream()
save()
API for writing buffered data to Cloud Storage: https://googleapis.dev/nodejs/storage/latest/File.html#savesave()
API: https : //googleapis.dev/nodejs/storage/latest/File.html#save
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.