图像预览而不是下载 AWS S3答案

【问题标题】：Image preview instead of download AWS S3图像预览而不是下载 AWS S3
【发布时间】：2021-04-02 06:55:30
【问题描述】：

我创建了一个只能上传 .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, true)
        } else {
            cb("File extension does not match the mimetype, check the file is not corrupt" + " " + extension + " and " + mimeType, 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, file, 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 属性一起使用，但到目前为止，还没有运气。

【问题讨论】：

标签： node.js express amazon-s3 multer multer-s3

【解决方案1】：

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

你有两个选择：-

上传新图片并在浏览器中打开链接
以隐身模式打开相同的链接

这两个解决方案都应该可以工作，我遇到了同样的问题，这两个选项都工作得很好。

【讨论】：