프로젝트/사진(CRUD)
(6)
-
프로젝트/사진(CRUD)2022.12.18
Vue-cli, Spring-boot를 사용하여 사진 전송 및 불러오기(5) - 배포
목차 : https://okane-on-cliff.tistory.com/246 1. 프론트 .env.local의 환경변수 값을 배포하고자 하는 IP주소로 바꿔준다. 이후 npm run build로 빌드 2. 백 String fileSeparator = File.separator; 컨트롤러에서 이 변수를 추가해 줘서 윈도우에서 쓰는 "//"를 찾아 있다면 fileSeparator로 변경해준다. 또한 백에서도 파일을 저장하는 파일패스 환경변수를 우분투에 맞게 변경해준다. #environment properties #file.path=C:\\TempImage file.path=/home/ubuntu/asset/picturePractice 이후 static에 프론트를 넣고 메이븐 빌드를 하면된다. https:/..0 -
프로젝트/사진(CRUD)2022.12.18
Vue-cli, Spring-boot를 사용하여 사진 전송 및 불러오기(4) - 코드 작성 (백)
목차 : https://okane-on-cliff.tistory.com/246 1. 사진을 올리는 메인 아이디어 데이터베이스에는 파일의 정보, 로컬 환경에는 파일 자체를 저장 2. 사진을 불러오는 메인 아이디어 데이터베이스에서 파일의 정보를 가져오고 파일자체를 Base64로 바꾸어서 Map형식의 객체로 묶어 프론트로 전달 PictureDto.java @Getter @Setter @NoArgsConstructor @AllArgsConstructor public class PictureDto { String savedName; String ext; String originalName; String savedPath; long volume; } 위와같은 어노테이션이 내가 이때까지 해왔던 거랑 비슷하다. Pic..0 -
프로젝트/사진(CRUD)2022.12.18
Vue-cli, Spring-boot를 사용하여 사진 전송 및 불러오기(3) - 코드 작성 (프론트)
목차 : https://okane-on-cliff.tistory.com/246 1. App.vue 전체 {{totalVolume}} / 1GB 전송 전체 삭제 {{file.fileName}} 다운로드 몇 가지 특이점 (1) 이미지 소스 {{file.fileName}} 다운로드 src의 구성은 base64형식으로 적어 주었다 (2) 파일 인풋 형식 v-model은 통하지 않는다. @change로 data를 갱신해준다. (3) 파일 전송 방법 formData.append("file", this.oneFile); var result = await axios.post(process.env.VUE_APP_URL + "/uploadOneFile", formData, {headers: {'Content-Type': ..0 -
프로젝트/사진(CRUD)2022.12.18
Vue-cli, Spring-boot를 사용하여 사진 전송 및 불러오기(2) - 개발 환경 구축(백)
목차 : https://okane-on-cliff.tistory.com/246 스프링 부트는 메이븐, 자바8을 사용하였다. 라이브러리는 스프링 웹, 스프링 데브툴, 롬복, 마이바티스, MySQL, JWT, common-io를 사용하였다. 1. pom.xml org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.3.0 org.springframework.boot spring-boot-devtools runtime true com.mysql mysql-connector-j runtime org.projectlombok lombok true org.springframework.bo..0
'프로젝트/사진(CRUD)' 카테고리의 글 목록
'프로젝트/사진(CRUD)' 카테고리의 글 목록