图像文件下载或在浏览器中显示

Question

我正在用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我想，但没有运气实现它。我只是在寻找有关使用什么的指导，我会尝试一下。

编辑(感谢Rich Churcher(：

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
    }
  }

工作就好！

Answer 1

Koa 的例子之一是 stream-file，这是一个很好的起点。通常这只是将ctx.body设置为流的情况。显然，您希望使用 GridFS 作为源而不是本地文件系统。

我注意到gridfs-stream，我认为这会让你的生活更轻松。但是，假设您不想添加另一个依赖项。以下是下载的最低处理程序：

const { GridFSBucket, MongoClient } = require('mongodb')
// ...
app.use(async ctx => {
  const connection = await MongoClient.connect('mongodb://localhost:27017')
  const db = connection.db('gfs-example')
  const bucket = new GridFSBucket(db, { bucketName: 'images' })
  ctx.type = 'image/jpg'
  ctx.body = bucket.openDownloadStreamByName('foo.jpg')
})

看起来您已经设置了自己的数据库工具，我只是包含一个连接以使此答案更加独立。请注意，设置ctx.type并不是获取文件所必需的，但它有助于向浏览器指示它应该显示图像，而不是将其视为下载。