AWS S3 - 如何阻止图像强制下载而不是显示。答案

【问题标题】：AWS S3 - How to stop images from force downloading instead of displaying.AWS S3 - 如何阻止图像强制下载而不是显示。
【发布时间】：2020-05-07 20:41:36
【问题描述】：

我目前正在尝试将图像从我的网站加载到 AWS S3。我有将图像上传到服务器的功能，但是当我尝试查看它们下载而不是显示的图像时。我读到有一种方法可以设置文件类型，这样就不会发生这种情况。我不知道该怎么做。任何帮助都会很棒。

                router.post('/heroes/createNewHeroes', function(req,res) {
                    var formidable = require('formidable'),
                    http = require('http'),
                    util = require('util');

                    var form = new formidable.IncomingForm();

                    form.parse(req, function(err, fields, files) {
                        console.log(fields);
                        console.log(files);

                        // Load the AWS SDK for Node.js
                        var AWS = require('aws-sdk');
                        var shortid = require('shortid');
                        var fs = require('fs');
                        var fileStream = fs.createReadStream(files.asset.path);
                        var newFilename = shortid.generate()+"_"+files.asset.name;

                        // Set your region for future requests.
                        AWS.config.region = 'us-west-2';
                        AWS.config.accessKeyId = 'access Key';
                        AWS.config.secretAccessKey = 'secret Key';

                        console.log(newFilename);

                        fileStream.on('error', function (err) {
                          if (err) { throw err; }
                        });

                        fileStream.on('open', function () {
                            var s3bucket = new AWS.S3({params: {Bucket: ' '}});
                            s3bucket.createBucket(function() {
                              var params = {Key: newFilename, Body: fileStream};
                              s3bucket.upload(params, function(err, data) {
                                if (err) {
                                    console.log("Error uploading data: ", err);
                                } else {
                                    console.log("Successfully uploaded data");

                                    projectX.createHeroes(['plantTypes', 'asset', 'cost', 'energy', 'isSunProducer', 'isShooter', 'isExploding', 'sunFrequency', 'shootingFrequency', 'damage'], [fields.plantTypes, newFilename, fields.cost, fields.energy, fields.isSunProducer, fields.isShooter, fields.isExploding, fields.sunFrequency, fields.shootingFrequency, fields.damage], function(data){
                                        res.redirect('/heroes')
                                    });
                                }
                              });
                            });

                        });

                    });
                });

【问题讨论】：

这是s3.amazonaws.com/zombiesrising/ByU1Nwmr_bomberOne.png的文件之一

标签： amazon-web-services amazon-s3

【解决方案1】：

var params = {Key: newFilename, ContentType: 'image/png', Body: fileStream};

http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property

【讨论】：

【解决方案2】：

只需输入 "contentType: multerS3.AUTO_CONTENT_TYPE " 。它会起作用的。

例如：

var upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'some-bucket',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    key: function (req, file, cb) {
      cb(null, Date.now().toString())
    }
  })
})

访问此链接了解更多详情https://github.com/badunk/multer-s3

【讨论】：

【解决方案3】：

这对我有帮助

storage: multerS3({
s3: s3,
bucket: "bucketname",
acl: "public-read",
contentType: multerS3.AUTO_CONTENT_TYPE,
key: function(req, file, cb) {
  console.log("req.file", file);
  cb(null, `${Date.now()}-${file.originalname}`);
}
})

【讨论】：