图像预览而不是下载 AWS S3

问题描述

我制作了一个只能上传 .jpeg、.jpg 和 .png 的 Node.js lambda 服务。使用 multer 和 express 现在过滤工作正常，其他一切也正常。

我遇到的问题是，当文件已经上传时，我无法使用 s3 提供的链接从 s3 控制台预览它，而是直接下载图像。

代码如下：

const fileFilter = (req,file,cb) => {
    let mimeType = file.mimetype;
    const fileString = file.originalname;
    let extension = path.extname(fileString);
    if(mimeType == 'image/jpeg'){
        if(extension == '.jpeg' || extension == '.jpg'){
            cb(null,true)
        } else {
            cb("File extension does not match the mimetype,check the file is not corrupt" + " " + extension + " and " + mimeType,false)
        }
    } else if( mimeType == 'image/png'){
        if(extension == '.png'){
            cb(null,false)
        }
    } else {
        cb("File type is not allowed" + " " + mimeType,false)
    }
}

const multerS3Config = multerS3({
    s3,acl: 'public-read',bucket: process.env.bucket,ContentType: multerS3.AUTO_CONTENT_TYPE,key: (req,cb) => {
        const fileString = file.originalname;
        const fileExtension = path.extname(fileString);
        let idSha256 = crypto.createHash('sha256').update(fileString).digest("hex");
        cb(null,`${idSha256}.${fileExtension}`);
    }
})

const upload = multer({
    storage: multerS3Config,fileFilter: fileFilter,limits:{
        fileSize: 1024 * 512
    }
}).single('photo')


service.post('/api/v1/images',(req,res) => {
    upload(req,res,(err) => {
        if (err) {
            res.status(400).send(err)
        } else {
            res.status(200).send('Success')
        }
    })
});

module.exports.service = serverless(service);

这里是 serverless.yml

service: image-upload

frameworkVersion: '2'

custom:
  bucket: XXXXXXXXX
  default_stage: dev
  apigwBinary:
    types:
      - 'image/png'
      - 'image/jpeg'
      - 'image/jpg'



plugins:
  - serverless-apigw-binary
  - serverless-offline


provider:
  name: aws
  iamRoleStatements:
    - Effect: 'Allow'
      Action:
        - 's3:PutObject'
        - 's3:PutObjectAcl'
      Resource: 'XXXXXXX'
  runtime: nodejs12.x
  profile: image_uploader
  stage: ${opt:stage,self:custom.default_stage}

functions:
  uploadS3File:
    handler: handler.service
    environment:
      bucket: ${self:custom.bucket}-${self:provider.stage}
    events:
      - http:
          path: /api/v1/images
          method: post

因为我一直在阅读，它应该与 multerS3 对象上的 ContentType 属性一起使用，但到目前为止，没有运气。

解决方法

如果您在代码中添加 contentType 之前在浏览器上打开链接，并在代码中添加 contentType 后再次尝试打开它，它仍会下载。

您有两个选择：-

1. 上传新图片并在浏览器中打开链接

2. 以隐身模式打开相同的链接

这两个解决方案都应该有效，我遇到了同样的问题，这两个选项完美无缺。