AWS_SDK를 열어 S3에 업로드한 이미지는 브라우저에 표시할 수 없습니다.

10044 단어 Node.jsAWS_SDK

Node.js에서 그림 업로드


이거 만들 때 빠져있으면...
코드가 이런 느낌이에요.
var
    AWS = require('aws-sdk'),
    fs = require('fs'),
    upload;

AWS.config.update({
    accessKeyId: 'AKIXXXXXXXXXXXXX',
    secretAccessKey: 'XXXXXXXXXXXXXXXXXXXXXX',
    region: 'ap-northeast-1'
});

upload = function ( file, callback ) {
    var
        bucketName = "hogehogeBucket",
        fileName = file.filename,
        body = fs.readFileSync(file.path),
        s3 = new AWS.S3({params: {Bucket: bucketName, Key: fileName}});

    s3.upload({Body: body}, function(evt) {
        // console.log(evt);
    }).send(function(err, data) {
        // 結果返す
        callback(err, data);
    });

};

module.exports = {
    upload : upload
};
이미지를 업로드할 수 있지만 업로드된 파일의 URL에 액세스하면 브라우저에 이미지가 표시되지 않습니다.

이런 느낌으로 브라우저에서 다운로드를 시작합니다.
아니에요!저장이 아니라 브라우저에 표시하면 됩니다!이런 마음.
Qita의 이미지 같은 것은 s3 이미지로 열면 브라우저에 표시됩니다.
뭐가 달라!

지정된 Content-Type이 없습니다.


AWS의 관리 콘솔에 수동으로 업로드된 이미지 파일을 브라우저에 표시할 수 있습니다.
aws-sdk에서 올린 파일과 대상의 속성을 비교한 결과 여기가 다르다는 것을 알 수 있습니다
  • 수동으로 완성된 jpeg 파일
  • aws-sdk를 통해 향상된 jpeg 파일

  • Content-Type이 octet-stream이 됩니다.지정한 콘텐츠-type의 매개 변수가 떨어졌네요.

    이렇게 하시면 됩니다.


    s3.upload 함수의 매개 변수에 대한 ContentType 매개 변수 지정
    var
        AWS = require('aws-sdk'),
        fs = require('fs'),
        upload;
    
    AWS.config.update({
        accessKeyId: 'AKIXXXXXXXXXXXXX',
        secretAccessKey: 'XXXXXXXXXXXXXXXXXXXXXX',
        region: 'ap-northeast-1'
    });
    
    upload = function ( file, callback ) {
        var
            bucketName = "hogehogeBucket",
            fileName = file.filename,
            body = fs.readFileSync(file.path),
            s3 = new AWS.S3({params: {Bucket: bucketName, Key: fileName}});
                            // ★ ↓この部分 ★
        s3.upload({Body: body, ContentType: file.mimetype}, function(evt) {
            // console.log(evt);
        }).send(function(err, data) {
            // 結果返す
            callback(err, data);
        });
    
    };
    
    module.exports = {
        upload : upload
    };
    
    정보를 찾아도 의외로 나오지 않는 게 상식인가?찾는 방법이 좋지 않죠.

    겸사겸사 말씀드리겠습니다.


    만약 다른 함수에서 위의 함수를 호출한다면
    var s3 = require( './lib/s3' );
    
    s3.upload( req.file, function (err, data) {
        // なんか処理
    }
    
    의 느낌 사용.(위 모듈은lib/s3.js로 저장됨)
    매개 변수 req.파일은 multer라는 Express 패키지를 사용할 수 있습니다.

    좋은 웹페이지 즐겨찾기