基于Node、Koa2、Mongo、GridFS和React的图片上传应用文件读取问题

我正在开发一款基于Node、Koa2、Mongo、GridFS和React的图片上传应用，目前已经通过以下代码实现了文件上传功能：

// HANDLE POST MULTIPART FORM DATA
app.use(async function(ctx, next) {
 if ( !ctx.request.is('urlencoded', 'multipart') || ('POST' != ctx.method && ctx.url === '/uploadFiles') )
 return await next()
 console.log('POST REQUESTED AT: ', ctx.url)
 // HANDLE THIS MIME TYPE SOME OTHER WAY!!!!
 var mimeTyp = ''
 // WAIT UNTIL CONNECTION IS RESOLVED
 const conn = await connectionDB()
 // SETUP THE MAIN DATABASE
 const testDB = conn.db('gridfsTestDB')
 // SETUP FS.FILES CONNECTION
 const fsFiles = testDB.collection('fs.files')
 // SET THE BUCKET FOR GRIDFS
 const bucket = new mongodb.GridFSBucket(testDB)
 // DECLARE WHERE YOU WANT THE FILE TO BE UPLOADED AND YOU CAN SUPPLY ADITIONAL DATA HERE TO THE FILE
 const writeStream = bucket.openUploadStream()
 const readStream = bucket.openDownloadStream()
 console.log(readStream)
 // ASYNC-BUSBOY MIDDLEWARE HANDLES FORM SUBMITION AND FILE PIPEING
 const { fields } = await AsyncBusboy(ctx.req, {
 // THIS IS CALLED FOR EACH CHUNK OF FILE SENT THROUGH PIPE
 onFile: function(fieldname, file, filename, encoding, mimetype) {
 console.log('start pipe')
 console.log('MIMETYPE', mimetype)
 mimeTyp = mimetype
 file.pipe(writeStream)
 console.log('end pipe')
 }
 })
 // HERE WE WAIT FOR STREAM OF THE FILE TO FINISH AND THEN WE APPEND METADATA TO IT
 await onStreamFinish(writeStream)
})

但在从Mongo读取文件并展示给用户时遇到了问题，我猜测可以用createReadStream，但尝试后未成功，希望能得到相关实现指引。

解决方案：异步读取GridFS文件并返回给前端 #

经过调整，以下代码已经可以正常运行，实现了从GridFS异步读取文件并通过Koa2响应给前端展示的功能：

try {
 const conn = await connectionDB()
 const testDB = conn.db('gridfsTestDB')
 const fsFiles = testDB.collection('fs.files')
 const bucket = new mongodb.GridFSBucket(testDB)
 const metadataFile = await getfileToDownload(ctx.params.id, fsFiles)
 const readStream = bucket.openDownloadStream(ObjectId(ctx.params.id))
 console.log(metadataFile)
 ctx.set('Content-Type', metadataFile.contentType)
 ctx.set(
 'Content-Disposition', 'inline; filename="' + normalizeString(metadataFile.metadata.DocumentName) + '"'
 )
 ctx.body = readStream
} catch (err) {
 console.log(err)
 ctx.status = 503
 ctx.body = { message: 'Unable to preview the document. Error: ' + err.message }
}

关键要点说明： #

• 数据库连接与初始化：先通过await connectionDB()建立异步连接，然后初始化GridFSBucket——这是操作GridFS的核心对象，能更贴合GridFS的API完成文件读写。
• 获取文件元数据：通过getfileToDownload函数从fs.files集合拿到文件的元数据（比如Content-Type、自定义文件名等），这一步是为了设置正确的响应头，让浏览器能正确解析并展示文件。
• 创建下载流：使用bucket.openDownloadStream(ObjectId(ctx.params.id))根据文件ID创建读取流，这是GridFS官方推荐的异步读取方式，比直接用createReadStream更适配GridFS的存储结构。
• 设置响应头：
  • Content-Type告诉浏览器文件的类型（比如图片的image/jpeg），确保能正确渲染展示。
  • Content-Disposition设为inline表示在浏览器内直接展示，而不是触发下载，同时指定文件名能提升用户体验。
• 错误处理：用try-catch捕获异常，返回503状态码和友好的错误信息，前端可以据此给用户清晰的反馈。

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