NextJS 文件上传到谷歌云存储成功但总是上传 0 字节文件 - 使用强大

Question

Im trying to implement a fileupload in nextJS and stream files to google cloud storage. I'm using formidab. Formidable is giving me a filepath, newFilename, filesize, etc but when the file showing up in google storage it has zero bytes. It's like the location is being created but my blob stream isn't actually pushing the file there.

Below is code from my api route. Any ideas?

import { Storage } from "@google-cloud/storage";
import formidable from '../../lib/formidable-serverless'

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  console.log('req')
  const storage = new Storage({
    projectId: process.env.GOOGLE_SERVICE_ID,
    client_email: process.env.GOOGLE_CLIENT_EMAIL,
    private_key: process.env.GOOGLE_SERVICE_KEY,
  });
  const data = await new Promise(function(resolve, reject) { 
    const form = new formidable.IncomingForm();
    form.keepExtensions = true;
    form.parse(req, function(err, fields, files) {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });
  const file = data.files.file
    try {
      const bucket = storage.bucket(process.env.GCS_BUCKET)
      const blob = bucket.file(file.originalFilename);
     
      const blobStream = blob.createWriteStream({
        resumable: false,
      });
    
      blobStream.on("error", (err) => {
        console.log('ERR', err.message)
        res.status(500).send({ message: err.message });
      });
  
      blobStream.on("finish", async () => {
        const publicURL = `https://storage.googleapis.com/${bucket.name}/${blob.name}`
      ;
        try {
          await blob.makePublic();
        } catch {
          return res.status(500).send({
            message: `Uploaded the file successfully: ${file.newFilename}, but public access is denied!`,
            url: publicURL,
          });
        }
  
        res.status(200).send({
          message: "Uploaded the file successfully: " + file.newFilename,
          url: publicURL,
        });
      });
      blobStream.end();
    } catch (err) {
      if (err.code == "LIMIT_FILE_SIZE") {
        console.log('ERR', err.message)
        return res.status(500).send({
          message: "File size cannot be larger than 25MB!",
        });
      }
  
      res.status(500).send({
        message: `Could not upload the file: ${file.newFilename}. ${err}`,
      });
   }

This is what my blobstream looks like immediately after creating it.

Writable {
  _writableState: WritableState {
    objectMode: false,
    highWaterMark: 16384,
    finalCalled: false,
    needDrain: false,
    ending: false,
    ended: false,
    finished: false,
    destroyed: false,
    decodeStrings: true,
    defaultEncoding: 'utf8',
    length: 0,
    writing: false,
    corked: 0,
    sync: true,
    bufferProcessing: false,
    onwrite: [Function: bound onwrite],
    writecb: null,
    writelen: 0,
    afterWriteTickInfo: null,
    buffered: [],
    bufferedIndex: 0,
    allBuffers: true,
    allNoop: true,
    pendingcb: 0,
    prefinished: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: true,
    errored: null,
    closed: false
  },

And this is what the file looks like after formidable promise is resolved. There is also a writable stream there as well.

PersistentFile {
  _events: [Object: null prototype] { error: [Function (anonymous)] },
  _eventsCount: 1,
  _maxListeners: undefined,
  lastModifiedDate: 2022-11-22T14:54:26.597Z,
  filepath: '/var/folders/yb/l636l56d7ng731jp24crv6lw0000gn/T/9e8fb9b8b1e0740b2622b990b',
  newFilename: '9e8fb9b8b1e0740b2622b990b',
  originalFilename: '17.mp3',
  mimetype: 'audio/mpeg',
  hashAlgorithm: false,
  size: 7020751,
  _writeStream: WriteStream {
    _writableState: WritableState {
      objectMode: false,
      highWaterMark: 16384,
      finalCalled: true,
      needDrain: true,
      ending: true,
      ended: true,
      finished: true,
      destroyed: true,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 0,
      writing: false,...
}

Am i somehow not passing my file into the writestream when i create my blob?

Answer 1

Answering as a Community wiki,

This can be solved by implementing a readStream that read the file path where formidable was temporarily storing the file before the writestream began.

createReadStream(file.filepath) 
.pipe(blob.createWriteStream(file.originalFilename, file.mimetype))  
console.log('blobstream', blobStream) 
.on("error", (err) => { console.log('ERR', err.message) 
res.status(500).send({ message: err.message 
});
}) 
.on("finish", async () => { // create a url to access file ...