목록스프링 (45)
studyplan
스프링부트 파일 업로드 ! 비동기 버전 5. 이미지 아닌 파일 , 다운로드 만들기
이미지가 아닌 , text 파일을 넣었을때 ! 어떻게 되는지 코드를 봐보자 ! https://studyplan.tistory.com/184 스프링부트 파일 업로드 ! 비동기 버전 3. 넣은 파일 썸네일 띄우기 썸네일 띄우기!! 저번 과정에서 이 경로로 드롭이벤트한 파일을 보냈을때 파일이 저장된것을 확인했다 그러고 그 저장이 끝난후 ! return 값이 저장된 경로가 나오는 리스트를 반환 받게 되어있엇 studyplan.tistory.com 저곳에 올린 파일이 이미지가 맞는지 아닌지 까지 구분하는 메서드를 통해서 이미지일때 어떻게 나올지 까지 구현해봤다 ! 그럼 이미지가 아닐때는 어떻게 될까 ?
스프링부트 파일 업로드 ! 비동기 버전 3. 넣은 파일 썸네일 띄우기
썸네일 띄우기!! 저번 과정에서 이 경로로 드롭이벤트한 파일을 보냈을때 파일이 저장된것을 확인했다 그러고 그 저장이 끝난후 ! return 값이 저장된 경로가 나오는 리스트를 반환 받게 되어있엇다 !! 그래서 위위 코드를 보면 showFileData(fileNames); 이 함수에 그 리스트를 넣는걸 확인 할수있다 ! 그럼 그 함수를 확인 해보러 가자 ! 화면에 보여주는데 . 저게 이미지인지 아닌지 부터확인 해야된다 ! 확인 하는 함수로 가면 ! 내가 넣은 사진의 특징을 보면 ! 끝이 .jpg로 되어있고 보통 사진은 , 상어.jpg 이런식의 모양을 나타낸다 그래서 .jpg 로 이게 그림인지 아닌지 확인할수있는것이고 ! 그래서 let originFileName = fileName.substring(file..
스프링부트 파일 업로드 ! 비동기 버전 2. 서버에 저장! @ResponseBody, MultipartFile, ResponseEntity
지난 시간에 자바스크립트로 비동기 요청을 보내는것 까지 했었다 근데 어디로 보냈는지 확인이 안되는 상태이니 서버쪽으로 가서 확인해 봐야겠다 !! 와 여기서 체크포인트가 진짜 많다 ! 1. @PostMapping() // post 형식으로 받는다는점 !! 2. 비동기 방식이라서 @ResponseBody 이거 붙여줘야 한다는점!! 3. 파일을 받았기 때문에 MultipartFile 을 써서 파일에 대한 정보를 받을것! 4. 파일과 상태를 함께 return 을 해줘야해서 ResponseEntity 를 써야 한다는점!! // 파일들을 받고 ! 그 리스트에서 String 타입의 클라이언트로 보낼 리스트를 만들고 받아온 파일리스트에서 파일을 FileUtils.uploadFile(file, UPLOAD_PATH); ..
스프링부트 파일 업로드 ! 비동기 버전 1. 자바스크립트,HTML fetch().then() 과정
저기에 드래그엔 드롭으로 파일을 넣어서 저장해보려고 한다 ! 저기에 사용한 HTML 은 !? 일단 ! 드래그엔 드롭을 하는데 변화를 주고싶어서 반응형으로 만들어봤다 ! 클래스가 fileDrop 인 태그를 잡아오고 // drag 진입 이벤트 $dropBox.on('dragover dragenter', e => { e.preventDefault(); $dropBox .css('border-color', 'red') .css('background', 'lightgray'); }); 그 박스 안에 , dragover dragenter 이벤트를 건다 ! // 그리고 e.preventDefault(); 기능을 정지 시키고 css('border-color', 'red') .css('background', 'light..
스프링부트 파일 업로드 ! 동기버전 2. uploadFile ,MultipartFile , file.transferTo()
파일 정보와 , 파일을 저장할 경로를 넣어주면 저장해주는 메소드를 만들었다 String newFileName = UUID.randomUUID().toString() + "_" + file.getOriginalFilename(); UUID.randomUUID() 이건 랜덤문자열을 만들때 사용하는 메소드이고 , 중복없는 문자열을 생성해서 준다 랜덤문자열 + _ + 원래 파일이름 ! 경로를 바꾼다 ! // 오늘 날짜를 추가하는 메소드를 만들었는데 가보자 ! uploadPath 를 주면 오늘 날짜에서 년 월 일을 추출해서 dateInfo 에 넣어주고 uploadPath 를 newUploadPath 에 옮겨담고 newUploadPath = uploadPath + / + 년 + / + 월 +/+ 일 이렇게 붙여준다..
스프링부트 파일 업로드 ! 동기버전 1. <form>,<input>, enctype="multipart/form-data" , multiple ,
저기 빨간색 박스에 파일 선택을 누르면 내 파일에 업로드가 되도록 만드려고 한다 ! HTML 이다 form 형식이라 동기형식이고 단순히 텍스트 를 넣는게 아니라 파일을 넣어야 하기때문에 enctype="multipart/form-data" 이걸 붙여줬다 그리고 여러개를 전송할수 있도록 multiple 을 붙여준것이다 저 버튼을 누르면 어디로 가는지 보자 ! 위에 HTML 을 보면 인풋창에 name= "file" 이걸 볼수있다 ! 그래서 폼에 버튼을 누르면 name이 file 인 이름으로 들어오는데 그걸 식별할 어노테이션이 @RequestParam("file") 이것이다 이 리스트 안에 , 파일을 보면 여러가지 정보가 같이 온다는걸 볼수있는데 이러한 로그들이 찍혀서 나오는걸 볼수있다 그러고 파일 업로드 !..
스프링 부트 , 드롭이벤트 , 콘솔 e , e.originalEvent.dataTransfer.files; ,fileInput
드롭을 하면 일어날 로그들을 적어놨다