Vue项目通过GraphQL上传文件到Firebase Storage出现0字节问题求助

问题根因 #

• 你在创建Firebase写入流后立即调用了.end()方法，还没等上游的文件读取流把数据写入完成就主动关闭了写入流，直接导致没有任何数据被写入存储，最终生成0字节文件。
• 你在GraphQL的resolver中没有await异步的storageService.upload方法，resolver会提前执行结束，Node.js可能会提前销毁未处理完成的文件流，导致数据传输中断。
• upload方法本身没有返回Promise来标记流传输完成/失败状态，异步操作没有正确的等待逻辑。

修复方案 #

1. 调整上传逻辑的流处理，返回Promise标记完成状态 #

const upload = async (filename, ext, mimetype, stream) => {
  const metadata = {
    metadata: {
      firebaseStorageDownloadTokens: uuid()
    },
    contentType: mimetype
  }
  const fullFilename = `profiles/${filename}.${ext}`
  const writeStream = bucket
    .file(fullFilename, {
      gzip: true,
      metadata: metadata
    })
    .createWriteStream()

  // 监听流事件，返回Promise供上层等待
  return new Promise((resolve, reject) => {
    stream.pipe(writeStream)
    writeStream.on('finish', resolve)
    writeStream.on('error', reject)
  })
}

2. 在GraphQL resolver中添加异步等待逻辑 #

uploadStream: {
  type: GraphQLBoolean,
  args: {
    id: {
      type: GraphQLString
    },
    file: {
      type: GraphQLUpload
    }
  },
  resolve: async (root, { id, file }, context) => {
    const { filename, mimetype, createReadStream } = await file
    const stream = createReadStream()
    const ext = filename.substr(filename.lastIndexOf('.') + 1)
    // 等待上传操作完成再结束resolver
    await storageService.upload(id, ext, mimetype, stream)
    return true
  }
}

内容的提问来源于stack exchange，提问作者capiono