1. 파일 업로드 버튼
<ul>
<input type="file" id="file"/>
<label for="fie">+</label>
</ul>
업로드 여러개 받으려면 multiple 옵션 주면 됨
<input multiple type="file" id="file"/>
특정 타입만 업로드 받으려면 accept 옵션 주면 됨.
하지만 정확히 타입 체크하려면 자바스크립트로 확장자 검사해야 함.
<input accept="image/*" type="file" id="file"/>
2. 업로드한 이미지를 HTML로 보여주기
1) FileReader() 사용
파일을 글자로 변환해줌
2) URL.createObjectURL() 사용
이미지의 가상 URL을 생성해줌
반응형
'Knowledge Wiki > Vue.js' 카테고리의 다른 글
Vue.js 필터 (0) | 2021.12.06 |
---|---|
Vue.js BLOB (0) | 2021.12.06 |
Vue.js Vue 3 버전 특징 (0) | 2021.12.03 |
Vue.js router (0) | 2021.12.03 |
Vue.js AJAX (0) | 2021.12.03 |