如何使用 Node.js 将 Blob base64 字符串上传到谷歌云存储

Question

I'm building an application that will allow me to take a picture from my react app which accesses the web cam, then I need to upload the image to google cloud storage using a Hapi node.js server. The problem I'm encountering is that the react app snaps a picture and gives me this blob string (I actually don't even know if that's what it's called) But the string is very large and looks like this (I've shortened it due to it's really large size:

"imageBlob": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...

I'm finding it hard to find resources that show me how to do this exactly, I need to upload that blob file and save it to a google cloud storage bucket.

I have this in my app so-far:

Item.postImageToStorage = async (request, h) => {
  const image = request.payload.imageBlob;
  const projectId = 'my-project-id'
  const keyFilename = 'path-to-my-file'
  const gc = new Storage({
    projectId: projectId,
    keyFilename: keyFilename
  })

  const bucket = gc.bucket('my-bucket.appspot.com/securityCam');
  const blob = bucket.file(image);
  const blobStream = blob.createWriteStream();
  blobStream.on('error', err => {
    h.response({
      success: false,
      error: err.message || '=-->' + err
    })
  });
  console.log('===---> ', 'no errors::::')

  blobStream.on('finish', () => {
    console.log('done::::::', `https://storage.googleapis.com/${bucket.name}/${blob.name}`)
    // The public URL can be used to directly access the file via HTTP.
    const publicUrl = format(
      `https://storage.googleapis.com/${bucket.name}/${blob.name}`
    );
  });
  console.log('===---> ', 'past finish::::')
  blobStream.end(image);
  console.log('===---> ', 'at end::::')
  return h.response({
    success: true,
  })
  // Utils.postRequestor(path, payload, headers, timeout)
}

I ge to the success message/response h.response but no console logs appear except the ones outside of the blobStream.on I see all that start with ===---> but nothing else.

Not sure what I'm doing wrong, thanks in advance!

Answer 1

At the highest level, let us assume you want to write into file my-file.dat that is to live in bucket my-bucket/my-folder . Let us assume that the data you want to write is a binary chunk of data that is stored in a JavaScript Buffer object referenced by a variable called my_data . We would then want to code something similar to:

const bucket = gc.bucket('my-bucket/my-folder');
const my_file = bucket.file('my-file.dat');      
const my_stream = my_file.createWriteStream();
my_stream.write(my_data);
my_stream.end();

In your example, something looks fishy with the value you are passing in as the file name in the line:

const blob = bucket.file(image);

I'm almost imagining you are thinking you are passing in the content of the file rather than the name of the file.

Also realize that your JavaScript object field called "imageBlob" will be a String. It may be that it indeed what you want to save but I can also imagine that what you want to save is binary data corresponding to your webcam image. In which case you will have to decode the string to a binary Buffer. This looks like it will be extracting the string data starting data:image/jpeg;base64, and then creating a Buffer from that by treating the string as Base64 encoded binary.

Edit: fixed typo