Vue.js
Vue.js [썸네일업로드 기능 추가]
z00h
2022. 8. 1. 22:28
지난번 포스팅에서 springboot 썸네일 기능을 추가 했으니 곧바로 Vue.js에도 추가하여 글을 쓰고 확인을 해보자.
우선 CarWrite.vue 템플릿에 썸네일 업로드 를추가한다.
글 추가하기 버튼을 누르면 실행되는 editImage메서드에 FormData안에 밑줄친 thumb를 추가.
여기까지 하면 글 추가하기 페이지에서 썸네일 파일을 올릴수 있게 되고 글 추가시 db에 해당파일명이 들어가게 된다.
그리고 thumb디렉토리에는 이미지파일이 추가가 된다.
직접 test글을 써보았다.
기존에는 url링크를 넣어 thumb를 보여줬었지만
이제 데이터테이블 안의 thumb컬럼에서 저장된 이미지 파일을 보여주기 위해 Car.vue에 assets/thumb경로를 넣어 살짝 수정해주면 된다.
자 이제 수정 및 추가를 모두 마쳤고 Car.vue의 데이터테이블에 썸네일이 정상적으로 뜨는지 확인해 보면된다.
정상적으로 글이 작성되었고 선택한 썸네일 이미지가 보여진다!
그리고 이미지url을 넣어주었던 thumb컬럼을 모두 수정하여 나머지 글에도 정상적으로 썸네일이 잘 보여지는것을 볼 수 있다!