AWS_SDK를 열어 S3에 업로드한 이미지는 브라우저에 표시할 수 없습니다.
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에서 올린 파일과 대상의 속성을 비교한 결과 여기가 다르다는 것을 알 수 있습니다
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
};
AWS의 관리 콘솔에 수동으로 업로드된 이미지 파일을 브라우저에 표시할 수 있습니다.
aws-sdk에서 올린 파일과 대상의 속성을 비교한 결과 여기가 다르다는 것을 알 수 있습니다
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 패키지를 사용할 수 있습니다.
Reference
이 문제에 관하여(AWS_SDK를 열어 S3에 업로드한 이미지는 브라우저에 표시할 수 없습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kashitaka1118/items/4ab2a404ff900a3c76e3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 패키지를 사용할 수 있습니다.
Reference
이 문제에 관하여(AWS_SDK를 열어 S3에 업로드한 이미지는 브라우저에 표시할 수 없습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kashitaka1118/items/4ab2a404ff900a3c76e3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)