안녕하세요~ 정말 오랜만에 블로그에 로그인하네요.
그동안 많은분들이 질문을 남겨주시고, 그 질문에 서로 대답해주는 모습을 보니 마음이 뿌듯하네요 ㅎㅎ
스타트업에 합류하고 나서, 주구장창 안드로이드만 해왔는데, 이번주부터 API서버를 만들게 되었습니다.
그 중 가장 재미있었던 파트는 API서버에서 AWS의 S3(Simple Storage Service)로 파일을 업로드하는 부분입니다.
기존의 JavaScript, JQuery 등으로 업로드 하는 부분은 많이 나와있는데, Front-end framework(or library)를 이용해서 업로드 하는 부분에 대해서 설명이 잘 되어있는 부분이 없어 포스팅을 마음먹게 했네요.
Spec
Back-end : Spring-boot
Build tool : Maven.
Front-end : Vue.js 2.0
업로드 하는 부분만 보자면 이 스펙만 따라하시면 될 것 같습니다.
Front-end.
테스트 하기 위해서 순수 JavaScript , HTML5 , CSS3로만 작성했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/updates/debug/upload";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST",uri,true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
//alert(xhr.responseText);
console.log(xhr.responseText)
}
};
console.log(file.size);
fd.append('file',file);
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var fileArray = event.dataTransfer.files;
for(var i=0;i<fileArray.length;i++) {
sendFile(fileArray[i]);
}
}
}
</script>
<style type="text/css">
#dropzone {
width:483px;
height:298px;
border-radius: 30px;
background:#53a7ea;
transition:all 0.3s ease;
opacity:0.8;
}
#dropzone:hover
{
cursor:pointer;
opacity:0.6;
}
#dropzone_descriptor {
text-align: center;
padding-top: 30%;
}
</style>
</head>
<body>
<div>
<div id="dropzone">
<p id="dropzone_descriptor"> Drag & drop your file here.</p>
</div>
</div>
</body>
</html>
이렇게 작성해주면 정상적으로 작동하는데, 이번에 회사에서 Front-end 로, React or Vue를 자유롭게 선택해서 사용하라고 하셨는데,
React+Spring조합은 뭔가 세팅해줘야할게 너무 많더라구요.
그래서 Vue.js를 선택했습니다. ( 페이스북 페이지 Vue.js Kroea에 많은 정보를 항상 받아왔었거든요! )
그래서 Vue.js를 선택해 다음과 같이 코드를 작성했습니다.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/updates/debug/upload";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST",uri,true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
};
console.log(file.size);
fd.append('file',file);
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("ddzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var fileArray = event.dataTransfer.files;
for(var i=0;i<fileArray.length;i++) {
sendFile(fileArray[i]);
}
}
}
</script>
<style type="text/css">
#ddzone {
width:483px;
height:298px;
border-radius: 30px;
background:#53a7ea;
transition:all 0.3s ease;
opacity:0.8;
}
#ddzone_descriptor:hover
{
cursor:pointer;
opacity:0.6;
}
#ddzone_descriptor {
text-align: center;
padding-top: 30%;
}
</style>
......기타 등등의 html코드......
<div id="ddzone" v-if="!show" > // 여기가 Vue 코드가 적용되어있는 코드죠!
<p id="ddzone_descriptor"> Drag & drop your file here.</p>
</div>
.... 기타 등등의 html 코드 .....
이렇게 작성하니
Uncaught TypeError: Cannot set property 'ondragenter' of null
at window.onload (updates.html:120)
이런 에러를 내뱉더라구요 이런 나쁜쉐키 -_-;
확인해보니 다음코드랑 충돌이 발생했습니다.
var app = new Vue({
el: '#****', // 보안처리
data: {
services: services,
files: files,
show: true
},
methods: {
selectedService: function (service) {
cacheFileName = service;
files.splice(0, files.length);
axios.get('/updates/services/' + service)
.then(function (response) {
for (var i = 0; i < response.data.length; i++)
files.push(response.data[i]);
})
.catch(function (error) {
console.log("selectedService" + error);
});
},
toshow: function () {
this.show = !this.show;
},
download: function (file) {
var a = document.createElement('a');
a.setAttribute('href', '***' + cacheFileName + '/' + file); // *** 보안처리
a.click();
}
}
});
별에 별 짓을 다해봤습니다
onDragEnter로도 바꿔보고, addEventListener로도 바꿔보고 사용하지 말라고 했지만 혹시 몰라서 JQuery로도 작업을 해봤는데 계속 작동하지 않더라구요.
키워드로 "Vue.js 2.0 drag and drop when file upload"로 검색하니
npm을 이용해서 업로드하는 예제, 오픈소스만 주구장창 나왔습니다.
npm을 이용해서 했으면 React썻지 이사람아..
그러다 이렇게 설정해주니 되더라구요.
일단 작동하지 않는 Javascript 코드를 일부 삭제했습니다.
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var fileArray = event.dataTransfer.files;
for(var i=0;i<fileArray.length;i++) {
sendFile(fileArray[i]);
}
}
}
그동안 즐거웠다. 다음에 쓸 기회가 오면 써줄게.
그리고 Vue.js에 한개의 메소드를 추가했고, 기존의 div코드에도 코드를 일부 수정해줬습니다.
<div id="ddzone" v-if="!show" @dragover.prevent @drop="drop">
<p id="ddzone_descriptor"> Drag & drop your file here.</p>
</div>
drop: function(event) {
event.stopPropagation();
event.preventDefault();
var fileArray = event.dataTransfer.files;
for(var i=0;i<fileArray.length;i++) {
sendFile(fileArray[i]); // sendFile함수는 그대로 사용합니다!
}
}
이렇게해서 Front-end부분은 마무리지었습니다.
이제 남은건 Back-end인데,
Maven에 다음 코드를 넣어줍니다.
<dependency>
<groupId>com.amazonaws</groupId>
<artifactId>aws-java-sdk</artifactId>
<version>1.11.170</version>
</dependency>
그리고 사용하시는 Controller에 @RestController 어노테이션을 적용해주시고,
다음과 같은 PostMapping을 하나 만들어주죠. (이걸 Put메소드로 바꿔야되네요;; 지금보니 ㅋㅋㅋ)
@PostMapping(path = "/{service}/upload")
public List<PutObjectResult> upload(@PathVariable String service ,@RequestParam("file") MultipartFile[] multipartFiles) {
logger.info("{}/upload : {}",service,multipartFiles);
return s3Wrapper.upload(service,multipartFiles);
}
s3Wrapper는 .. 알아서 만드시고..
upload메소드는 다음과 같습니다.
private PutObjectResult upload(String service , MultipartFile multipartFile) throws IOException{
ObjectMetadata metadata = new ObjectMetadata();
metadata.setContentLength(multipartFile.getSize());
metadata.setContentType(multipartFile.getContentType());
InputStream inputStream = multipartFile.getInputStream();
PutObjectRequest putObjectRequest =
new PutObjectRequest(
bucket+"/"+service,
multipartFile.getOriginalFilename(),
inputStream,
metadata
);
PutObjectResult putObjectResult = amazonS3Client.putObject(putObjectRequest);
IOUtils.closeQuietly(inputStream,null);
logger.info("upload({},{}) : {}",service,multipartFile,putObjectResult);
return putObjectResult;
}
코드를 자세히 보신분은 이해가실테지만, 호출하는 메소드는 Multipart[]를 전달인자로 보내주는데, 받는곳은 Multipart 하나의 인스턴스로만 받습니다.
upload(Multipart[] multiparts) 메소드를 하나 만드시고, 위의 메소드를 length만큼 호출하는 메소드를 만들어주시면 됩니다! :)
public List<PutObjectResult> upload(String service , MultipartFile[] multipartFiles) {
List<PutObjectResult> putObjectResults = new ArrayList<>();
Arrays.stream(multipartFiles)
.filter(multipartFile -> !StringUtils.isNullOrEmpty(multipartFile.getOriginalFilename()))
.forEach(multipartFile -> {
try {
putObjectResults.add(upload(service , multipartFile));
} catch( IOException ioe) {
logger.error("upload({} , {}) - {}",service,multipartFiles,ioe);
}
});
logger.info("upload({},{}) : {}",service,multipartFiles,putObjectResults);
return putObjectResults;
}
코드 보시면 아시겠지만, 쓸때없는 코드라고 생각되는 부분이 조금 있습니다.
지우시고 사용하셔도 됩니다.
이렇게 작성하면 정상작동합니다.
보안상 문제로 많은 코드를 보여드릴 순 없었지만 핵심적으로 제가 맞이했던 에러들과, 작동에 필요한 코드를 모두 포함해드렸습니다.
ㄷㅐ학교 다닐때는 시간이 널널해서 포스팅 하나하나에 많은 정성을 기울여 포스팅 하고 그랬는데..
이제는 시간도 없고 코딩할 시간도, 잠 잘 시간도, 모두 부족하니 대충대충 핵심만 적게 되네요 ㅋㅋㅋㅋㅋㅋㅋ
제가 좀 더 개발을 잘하게되서 시간이 넉넉해지면 선생님의 마음으로 한땀한땀 알려드릴게요!
궁금한 점 있으시면 댓글 주세요!(언제 볼 진 잘 모르겠습니다.)
즐거운 주말 보내세요~ :')