반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Vue
- TypeScript
- 리액트
- sass
- Vue transition
- State
- 자료구조
- event
- input
- jsx
- MySQL
- 자바스크립트
- vuex
- webpack
- scss
- express
- react
- CSS
- App.vue
- HOC
- storybook
- Wecode
- mapGetters
- nodejs
- Vue.js
- v-html
- 댓글달기
- 쉬운설명
- ES6
- JavaScript
Archives
- Today
- Total
익명의 개발노트
[vue.js-express] 저장된 이미지 불러오기 및 이미지 URL만들기 본문
반응형
저장된 이미지를 불러오는 방법.
프론트에서 미리보기 버튼을 클릭 => 백엔드에서 저장된 이미지 주소보냄.
아래와 같이 명시해주면 public 폴더안에 있는 폴더를 url로 보낼 수가 있다.
//app.js
app.use(express.static('public'));
라우터에서 url을 붙여주고 이미지 이름을 같이 넣어서 send로 보내준다.
//router.js
router.get('/preview', async (req, res, next)=>{
const imgUrl = "http://localhost:3000/images/"
result = imgUrl+"저장된 이미지명" //imgUrl+"kitty.png"
res.send(result);
}
받는 쪽(프론트)에서는 HTTP통신이므로 ,결과물의 data로 받으면 된다.
await NoticePopupSettingService.previewPopup(item)
.then(result => {
this.imageUrlGroup = result.data;
})
반응형
'코딩일기 > TIL' 카테고리의 다른 글
[Sequelize] CRUD, 원하는 컬럼만 출력, 컬럼 합치기 (0) | 2019.11.14 |
---|---|
[vue.js] 업로드 된 이미지 파일 미리보기 기능구현 (0) | 2019.11.14 |
[Node.js] Vue(Vuetify) + express image upload 수정 (0) | 2019.11.04 |
[Node.js] Vue(Vuerify) + express image upload 삽입, 삭제기능 (2) | 2019.11.03 |
[mocha] 실행방법 (0) | 2019.10.30 |
Comments